Vuex is an officially provided tool for managing global variables, mainly for communication between components, and at the same time to minimize the coupling of components, as long as it is written according to the official format.
1. Installation
npm install vuex -S
2. Configuration
Then import it in main.js
import store from './vuex/store'
new Vue({Remember to write store inside,
3, the core warehouse store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 这里定义初始值
let state = {
name:"",
};
const mutations = {
setName(context,msg){
context.custid = msg;
},
};
// 事件触发后的逻辑操作
// 参数为事件函数
const actions = {
};
// 返回改变后的数值
const getters = {
};
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
4. Read the value in the store
computed: {
author () {
return this.$store.state.name
}
}
5. Change the value, the official recommended method
this.$store.commit('setName',"Jack");
setName should correspond to the method name in mutations in store