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

Question

在以下代码中，组件（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>

谢谢

Answer 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>

就是这样！