vue.js - Vue3 组合 api watch 存储值

Question

我想通过在 Vue 组件中观察它来检测 vuex 状态值的变化。我目前正在使用带有组合 API 的 vue 3。我试过这种方法:

setup(props) {
   const store = useStore();

   watch(store.getters.myvalue, function() {
      console.log('value changes detected');
   });

   return {
      myvalue: computed(() => store.getters.myvalue)
   }
},

但是在更改 myvalue 时不会调用控制台日志语句。

Answer 1

我认为您可能需要传递一个返回 myValue 的函数getter 而不是传递 myValue setter/getter 。
像这样:

setup(props) {
   const store = useStore();

   watch(()=>store.getters.myvalue, function() {
      console.log('value changes detected');
   });

   return {
      myvalue: computed(() => store.getters.myvalue)
   }
},

这是一个工作示例:

const store = Vuex.createStore({
  state() {
    return {
      count: 0
    }
  },
  getters: {
    count(state) {
      return state.count
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
});

const app = Vue.createApp({
  setup() {
    const store = Vuex.useStore();

    Vue.watch(() => store.getters.count, function() {
      console.log('value changes detected');
    });

    store.watch((state, getters) => getters.count, () => {
      console.log('value changes detected via vuex watch');
    })

    return {
      myvalue: Vue.computed(() => store.getters.count),
      change: ()=>{store.commit('increment')}
    }
  }
});

app.use(store);

app.mount("#app");

<script src="https://unpkg.com/vue@3.0.3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>

<div id="app">
  <button @click="change">💎</button>
  {{myvalue}}
</div>

然而，有更多特定于 Vuex 的方法可以做到这一点，例如使用 Vuex watch (或 subscribe)。示例和更多详细信息的链接: Watch for Vuex State changes!