Vue3组合API查看存储值

Question

我想通过在 Vue 组件中观察 Vuex 状态值来检测它的变化。我目前正在使用 Vue 3 和组合 API。我尝试过以下方法：

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

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

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

但改变console.log()时不会被调用。myvalue

Answer 1

我认为您可能需要传递一个返回getter 的函数， 而不是传递getter。myValue myValue

就像这样：

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！

Answer 2

让我笼统地回答你的问题。

首先，您需要创建包含状态、获取器、操作和突变的存储。

合成API

您需要通过以下方式在组件内导入 store

import { useStore } from 'vuex';

并在组件内部初始化它，如下所示：

export default {
 setup(){
  const store = useStore();
 }
}

为了观察商店的变化，你可以使用 watchEffect()，不要忘记导入它

import { watchEffect } from '@vue/runtime-core';

watchEffect(() => {
  // pretend you have a getData getter in store
  const data = store.getters.getData;
  if(data === null) return;
  console.log(data);
})

此外，您可以使用 watch()，这是一种有点旧的方式

import { watch } from '@vue/runtime-core';

watch(
  // pretend you have a getData getter in store
  () => store.getters.getData,
  (val, oldVal) => console.dir({ val, oldVal})
)

在某些情况下，您会在控制台中看到这样的警告

Invalid watch source:  null A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 

`watch(fn, options?)` signature has been moved to a separate API. Use `watchEffect(fn, options?)` instead. `watch` now only supports `watch(source, cb, options?) signature. 

选项API

观察商店变化的经典方法是创建这样的函数

data(){
 return {
  todo: null
 }
},
methods: {
 watchStore(){
  this.$store.watch(
    () => this.$store.getters.getData,
    data => this.todo = data
  )
 }
},
mounted(){
 this.watchStore();
}