直接上步骤
一、右击src，新建store目录，再右击store目录，新建store.js，里面代码如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//状态数据,要设置全局访问的state对象
const state = {
hello: null,
hello2: null
};
const actions = {
dosomething(context, payload) {
context.commit('dosomething', payload);
},
doanything(context, payload) {
context.commit('doanything', payload);
}
};
const mutations = {
dosomething(state, payload) {
this.state.hello = payload
},
doanything(state, payload) {
this.state.hello2 = payload
}
};
const store = new Vuex.Store({
state,
actions,
mutations
});
export default store;
简单描述一下，从组件中提交方法名以及参数到store.js中的action，action再提交到mutations，之后再mutations里面对state里面的参数进行操作
二、继续配置，需要让所有的组件都能够接触到store.js，打开main.js进行配置
//首先引入store从相应的目录
import store from './store/store.js'
//在Vue实例里面添加store
new Vue({
store,
render: h => h(App),
}).$mount('#app')
三、组件怎么提交呢？
//在组件中
this.$store.dispatch('dosomething', this.$data.value)
this.$store.dispatch('dosomething', this.$data.value2)
四、别的组件可以监听store中属性状态的改变，相应的作出反应
//在别的组建中，先写一个计算属性，将状态中的属性值返回回来
computed: {
getvalue() {
return this.$store.state.hello;
}，
getvalue2() {
return this.$store.state.hello2;
}
}，
//再用watch观察数值是否发生了变化，如果变化了立马作出一些措施
watch: {
getvalue(val, oldVal) {
console.log(val);//打印新的数值
console.log(voldVal);//打印旧的数值
},
getvalue2(val, oldVal) {
console.log(val);//打印新的数值
console.log(voldVal);//打印旧的数值，Ps:用来调用方法或者传递数值
}
}
