直接上步骤

一、右击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:用来调用方法或者传递数值
    }
}