(vuex)动态监听state变化

最新推荐文章于 2026-04-21 23:09:44 发布

原创最新推荐文章于 2026-04-21 23:09:44 发布 · 3.6w 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue-vuex

收录于

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Vuex的dispatch进行异步操作，并通过监听state变化来确保数据更新时能够及时响应。具体展示了如何在Vue应用中配置Vuex store，包括state、getters等部分，并在组件中使用mapGetters辅助函数及watch属性实现对特定状态的监听。

vuex的dispatch是异步执行的，所以如果有用到state的地方但是又没有绑定组件的话就会导致渲染完成了但是数据没有获取到的情况

如何检测state中的数据变化，下面举个栗子

/*store.js*/
const state={
  existSSID:{},
  wifiList:[]
};


const getters={
  getWiFiList: state => {
    return state.wifiList;
  }
};


export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});


/*在需要监听的ssid.vue文件中*/


 computed:{
      ...mapGetters([
        'getWiFiList'
      ])
    },
watch: {
   getWiFiList: function(li) { //li就是改变后的wifiList值
   this.getAllId(li); //调用别的函数
   console.log("改变",li);
      }