Question

在以下代码中，当c2更新存储计数器increment时，组件（app.vue）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>

就是这样！

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

1 个答案: