VueX：为啥 vuex 存储数据不更新组件数据属性？

Posted 2023-02-22

【中文标题】VueX：为啥 vuex 存储数据不更新组件数据属性？

【英文标题】：VueX: why vuex store data does not update components data property?VueX：为什么 vuex 存储数据不更新组件数据属性？

【发布时间】：2019-10-05 01:11:46

【问题描述】：

在以下代码中，组件（app.vue）c2 属性在increment 更新商店计数器this.$store.state.counter++; 时不会得到更新

我知道我可以通过使用 c2 作为 computed 属性来解决这个问题，但我想知道为什么 Vuex 或 vue 不启动反应性，因为计数器的值是通过增量方法更新的。

Store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store(
  state: 
    counter: 0
  ,
  mutation: 
    increment() 
      return this.$state.counter++;
    
  
);

App.vue

<template>
  <div id="app">
    <button @click="increment">Increment</button>
     c2 
  </div>
</template>

<script>
export default 
  data() 
    return 
      c2: this.$store.state.counter
    ;
  ,
  methods: 
    increment() 
      this.$store.state.counter++;
    
  
;
</script>

谢谢

【参考方案1】：

Vuex 使用一种叫做“动作”的东西，它们看起来就像突变，但它们不是改变状态，而是提交突变。你不能像这样修改你的 Vuex 存储状态：

methods: 
  increment() 
    this.$store.state.counter++
  

相反，您应该在商店内创建一个带有操作的操作对象：

actions: 
  increment (context) 
    context.commit('increment')
  

现在，该代码是这样说的：“无论何时派遣我（操作），运行名为增量的突变内的代码”，这意味着：“提交名为增量的突变”。

另一个重要的事情是您的组件方法称为“增量”。您应该将其修改为如下所示：

methods: 
  increment() 
    this.$store.dispatch('increment')
  

现在，每当您调用此方法时，您将调度一个将提交突变的操作。

最后，为了让你的状态在你的组件中（至少是好方法）将使用 Vuex 提供的 mapState 函数。

首先，在你的组件脚本标签中导入这个：

import  mapState  from 'vuex'

然后像这样创建一个计算属性：

computed: mapState([
  'counter'
])

这将使您能够访问在您的商店状态中定义的counter 属性。在这种情况下，您可以删除 data() 函数中的 return 语句并更改您的 html 以显示 counter 属性：

<template>
  <div id="app">
    <button @click="increment">Increment</button>
     counter 
  </div>
</template>

就是这样！

【讨论】：

感谢您的回答，但是我想知道 Vuex 或 vue 在计数器更改时不更新数据属性的原因。如果未使用 vuex 并且在同一组件或子组件中的任何位置，任何反应性属性都会更改该组件由 Vue 重新渲染（更新）。

counter 的值不会被更新，因为 Vuex 不允许像你那样直接改变它的值。你必须使用动作和突变来实现这种改变。无论哪种方式，它都行不通。

@appu 另外，重要的是要知道 Vue 反应性概念需要以某种方式完成才能看到它们。 Vuex state 是一个对象，而 counter 是该对象的一个​​属性，并且不会像您一样通过更改它们来自动监视它们。应用这些 Vuex 机制来改变你的 store 状态对于这个反应性的东西是可以的，你会看到变化。

Vuex state is an object and counter is a property of that object and they are not automatically watched by changing them just like you did. 感谢您的洞察力。 :-)