记录一下vuex的使用方法

在项目中碰到需要全局变量监听的问题，使用了vuex的响应式存储

在计算属性中返回某个状态

在A页面中通过某种方式更改了this.$store.state.notify.Statistics的值，这里我用vuex的commit【this.$store.commit(“Statistics”),data】修改

在B页面使用computed能监听到修改后的值，如果需要触发方法的话则放到watch里，computed和watch可以一起使用

 

A页面

$ctr.$vue.$store.commit("Statistics", data);

 

B页面

computed: {
  Statistics() {
      return this.$store.state.notify.Statistics;
    }
}    

 

若需使用方法

watch: {
    Statistics（newval, oldval） {
        //其他业务代码
    }
}

 

 

vuex.js

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    notify,
  },
  state,
  getters,
  mutations
});

 

state.js

// 根级别的 state
const states = {
  website_name: process.env.VUE_APP_WEBSITE_NAME,
  copyright: `©2021 ${process.env.VUE_APP_WEBSITE_NAME}`,

}

export default states;

 

notify.js

const notify = {
  state: {
    uragList: [],
  },
  mutations: {
    uragList(state, msg) {
      state.uragList = msg;
    },
  }
}

export default notify;

 

__EOF__

本文作者：橙汁先辈
本文链接：https://www.cnblogs.com/kc-yukikaze/p/15758699.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！