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;

這樣就避免了監聽事件的弊端，在任意位置改變這個值都能及時刷新