当 Vuex 存储状态发生变化时，Vue 应用程序状态不会更新

Question

我已经使用 Vue 几个月了，我现在正在尝试将 Vuex 与我的应用程序集成，但是当 Vuex 商店发生变化时我无法更新状态。

我创建了一个新应用并实现了一个简单的计数，只是为了看看它是否有效，但当 store.count 更改时，它仍然不会更新 count。 我的测试代码如下。

index.html:

<div id="app">
    <template>
        <h1>{{count}}</h1>
        <button @click="add">Add 1</button>
    </template>
</div>

index.js:

import Vue from 'vue/dist/vue.js';

import store from './store';

new Vue({
    el: '#app',
    store,
    data: {},
    computed: {
        count: () => store.state.count
    },
    methods: {
        add: () => store.commit('add')
    }
});

store.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add: (state) => state.count++
    }
});

我知道store.count 正在更新，因为我可以在 Vue 开发工具中看到它。我只是想不通为什么count 值也不会更新，我错过了什么？

Answer 1

问题很可能是您在index.js 中导入了Vue。尝试将其更改为：

import Vue from 'vue/dist/vue.js';

只是：

import Vue from 'vue';

这将有助于确保正确注册 Vuex。

我使用 @vue/cli 和 Vuex 创建了一个项目。从vue/dist/vue.js 而不是仅仅vue 导入主/索引无法有效注册Vuex，包括无法在子组件中访问this.$store。

希望对您有所帮助！

Answer 2

如关于actions的文档中所述

动作可以包含任意异步操作。

在您的情况下，单击add 按钮会执行异步代码。 另一方面，Mutations 是同步的，它使整个应用程序中的值保持不变。 可以通过commit 语句进行突变，例如store.commit("add").

store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  // Synchronous methods for modifying the values in the state.
  // They are handed a `state` from the store.
  mutations: {
    add: state => state.count++
  },
  // Asynchronous methods that can call mutation methods to mutate the state via commits.
  // They are handed a context of the `store`.
  actions: {
    add: store => store.commit("add")
  }
});

在CodeSandbox查看完整的工作示例。