vue实现任务栏消息提示

vue消息提醒，在不同页面访问同一变量，实现全局访问

---

一、在main.js中
1.引入包vuex

npm install vuex save

2.在main.js中导入组件

importVuexfrom'vuex'

3.导入组件

conststore=newVuex.Store({
state: {messageCount: 0},
mutations: {
changeMessage: (state, messageCount) => {
        state.messageCount=messageCount
      }
 });

4.利用钩子函数注入组件

newVue({store}).$mount('#app');

二、在要使用的pages.js中

// 给全局变量赋值
GetNewOrderCount().then((res) => {
if (res.status==200&&res.data.flag) {
    this.$store.commit('changeMessage', res.data.data.orderCount); })
 .catch((e) => {
    this.$store.commit('changeMessage', 0);
 });
// 如何在页面上访问 ，任意位置
$store.state.messageCount;

这样就避免了监听事件的弊端，在任意位置改变这个值都能及时刷新