1.src下新建store文件夹，新建index.js

import Vuefrom 'vue'//引入vue

import Vuexfrom 'vuex' //引入vuex

Vue.use(Vuex);

const store =new Vuex.Store({

state:{

unreadMessage:0,//用户未读消息

    },

    //获取数据

    getters: {

getUnreadMessage:function(state){

return state.unreadMessage;

        }

},

    //修改数据

    mutations:{

//改变用户消息的数量

        changeMessage(state,unreadMessage){

state.unreadMessage = unreadMessage;

        },

    },

    //把在组件中的this.$store.commit("add");换成这个，

//使用、this.$store.dispatch();

    actions:{//把在vue组件中处理的方法放在index的里面，

        changeMessageFun(context,unreadMessage){//接收一个与store实例具有相同方法得属性context对象

          context.commit("changeMessage",unreadMessage);

        },

    }

});

export default store;

2.main.js中

import storefrom './store/index'

Vue.prototype.$store = store;

3.组件中。

this.$store.getters.getUnreadMessage   //获取数据

this.$store.dispatch("changeMessageFun",this.unreadMessage);//设置数据