Vuex 存储状态更改不会更新 Vue 视图

Question

（请原谅我的英语）

在以下使用 Vue 的单文件组件 (es6) 的代码中，我不明白为什么视图没有随着商店状态的变化而更新：

index.js

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

import App from './components/App.vue'

const store = new Vuex.Store({
  state: {
    foo: 0
  },
  mutations: {
    foo (state) {
      state.foo++
    }
  }
})

Vue.use(Vuex)

new Vue({
  el: '#app',
  render: h => h(App),
  store
})

components/App.vue

<template>
<div @click="$store.commit('foo')">
  {{ $store.state.foo }}
</div>
</template>

<script>
export default {
  name: 'app',
  data() {}
}
</script>

我在 Vue Devtool 中看到状态在每次点击时都很好地更新，但是视图只显示 0

奇怪的行为：如果我使用热重载工具并对模板进行了一些更改（例如在 {{ $store.state.foo }} 之前添加 test:），它会导致视图自行刷新（？ ) 并显示正确的值...（但不修复反应性问题）

我是不是做错了什么？

提前感谢您的帮助！

Answer 1

解决方案

当我为这个问题编写自己的代码时，我尝试将 Vue.use(Vuex) 放在 new Vuex.Store 之前，它解决了问题...

所以这会起作用

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

Vue.use(Vuex)
const store = new Vuex.Store(...)

而且这不会

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

const store = new Vuex.Store(...)
Vue.use(Vuex)

说明

我遇到这个问题是因为我将实例化放在另一个文件中

import Vue from 'vue'
import Vuex from 'vuex'
import store from 'my-store'

Vue.use(Vuex)

...StandardJS 拒绝我在除文件顶部以外的其他地方导入某些内容... 所以这会触发警告

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

Vue.use(Vuex)

import store from 'my-store'

最终解决方案

我通过移动另一个文件中的 import Vuex from 'vuex' 和 Vue.use(Vuex) 解决了这个问题，因此：

index.js

import Vue from 'vue'
import store from 'my-store'

new Vue({
  el: '#app',
  render: h => h(App),
  store
})

我的店铺

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

Vue.use(Vuex)

export default new Vuex.Store({...})

Vuex 存储状态更改不会更新 Vue 视图

Vuex store state change doesn't update Vue views

vuejs2

vuex

解决方案

说明

最终解决方案