Vue3 组成 api 看存储值

Posted 2023-02-22

【中文标题】Vue3 组成 api 看存储值

【英文标题】：Vue3 composition api watch store value

【发布时间】：2021-08-18 21:06:29

【问题描述】：

我想通过在 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 改变时不会调用控制台日志语句。

【参考方案1】：

我认为您可能需要传递一个返回 myValue getter 的函数，而不是传递 myValue 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!

【讨论】：

是否推荐在return语句中写computed？一般问。

如果你有一个“足够小”的设置功能，这只是一个偏好问题，它可能没问题。随着复杂性的增加，它有助于更​​好的内务管理。在功能上，没有区别。