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
})

组件/ App.vue

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

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

我可以在Vue Devtool中看到，每次点击都会更新状态，但视图只显示0

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

我做错了吗？

谢谢你的帮助！

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视图

1 个答案:

解决方案

释

最终解决方案