npm i vuex --save-dev
創(chuàng)建store文件——>index.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
例子
//創(chuàng)建一個store倉庫
const store = new Vuex.Store({
//state用來存放數(shù)據(jù)的對象
state:{
//初始值笛匙、存放的東西
title:'商城'
},
//定義取數(shù)據(jù)
getters:{
// title:function(state){
// return state.title;
// }
title:state=>state.title,
}
})
export default store;
掛載
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';//倉庫
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
在組件中獲取store的
import{mapGetters} from 'vuex'
computed:{
//...mapGtters();獲取倉庫里的所有store值
//獲取倉庫里的title
...mapGetters(['title']),
//如果還有其它的值
//...mapGetters(['title','demo'])
}
使用
{{title}}
存數(shù)據(jù)
例子
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//創(chuàng)建一個store倉庫
const store = new Vuex.Store({
//state用來存放數(shù)據(jù)的對象
state:{
//初始值幽七、存放的東西
title:'商城'
},
//定義取數(shù)據(jù);;;;用來操作修改state的
getters:{
// title:function(state){
// return state.title;
// }
title:state=>state.title,
},
//存數(shù)據(jù)
mutations:{
updateTitle:(state,payload)=>{
//state.title='新值'
state.title='payload'
}
}
})
export default store;
使用
this.$store.commit('updateTitle','這是隨便寫的內(nèi)容');
{{title}}
actions:{
//用來向mutations發(fā)指令的（mutations負(fù)責(zé)干活龄糊，actions是指揮mutations干活的，項(xiàng)目里有些人用actions有些不用）
}
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//創(chuàng)建一個store倉庫
const store = new Vuex.Store({
//state用來存放數(shù)據(jù)的對象
state:{
//初始值嘉熊、存放的東西
title:'商城'
},
//定義取數(shù)據(jù)
getters:{
// title:function(state){
// return state.title;
// }
title:state=>state.title,
},
//存數(shù)據(jù)
mutations:{
updateTitle:(state,payload)=>{
//state.title='新值'
state.title='payload'
}
},
//
actions:{
updateTitle:({commit},payload)=>{
commit('updateTitle',payload);
}
}
})
export default store;
使用
dispatch//派發(fā)，發(fā)出一個命令
created(){
this.$store.dispath('updateTitle','這是隨便寫的內(nèi)容')
}
使用
{{title}}
