一、安装:
npm install vuex --save
二、在src目录下新建一个名为store的文件夹,为方便引入并在store里新建一个index.js,内容如下:
import Vue from'vue';
import Vuex from'vuex';
import test from './modules/test';
Vue.use(Vuex);
const store =new Vuex.Store({
state,
getters,
actions,
mutations
modules: { test },
});
export default store;
三、在 main.js里面引入store,然后再全局注册,这样就可以在任何一个组件里面使用this.$store了:
import store from'./store' //引入store
new Vue({
el:'#app',
router,
store,//使用store
template:'<App/>',
components: { App }
})
四、在store下新建modules文件夹,并新建测试用test.js,内容:
const test = {
state: {
msg: '原始数据'
},
const getters = { //实时监听state值的变化(最新状态)
getMsg(state) {
return state.msg
}
};
mutations: {
SET_MSG(state, msg) {
state.msg=msg;
},
}
};
const actions={
setMsg(context,msg){
context.commit('SET_MSG',msg);
}
}
export default test;
五、最后就是在组件使用了:
1、this.$store.dispatch('setMsg','测试数据') //设置msg的值
2、this.$store.getters.getMsg //获取msg的值