Vuex的问题

Question

问题：初步接触Vuex，出现这种情况，Vuex的state的属性值已经被修改，但是App.vue中的computed没有在页面中跟新，请问是什么问题，求帮助？

具体情况：
main.js

import Vue from 'vue'
import Vuex from 'Vuex'
import App from './App'
import store from './store/store.js'

Vue.config.productionTip = false

Vue.use(Vuex)

// eslint-disabled-next-line
/* eslint-disable */
new Vue({
    el: '#app',
    store,
    components: { App },
    template: '<App/>'
})

App.vue 文件

<template>
  <div>
    <div>{{count}}</div>
    <div>
      <button v-on:click="add()">+</button>
      <button v-on:click="reduce()">-</button>
    </div>
  </div>
</template>

<script type="text/javascript">
// eslint-disable-next-line
/* eslint-disable */
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    add() {
      this.$store.commit("increment");
      console.log(this.count);
    },
    reduce() {
      this.$store.commit("decrement");
      console.log(this.count);
    }
  }
};
</script>
<style>
</style>

store.js
import Vue from 'Vue'
import Vuex from 'Vuex'

Vue.use(Vuex)

/* eslint-disable */
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment: state => state.count++,
        decrement: state => state.count--
    }
})

Answer 1

vue文件中添加事件不用add()

Answer 2

mutaions中只是自定义事件，需要在actions唤醒，实际上也就是在actions中提交事件，然后，在组件中通过dipatch()来调用。你的代码应该修改如下:

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment: state => state.count++,
        decrement: state => state.count--
    },
    actions:{
        increment: context => context.commit('increment'),
        decrement: context => context.commit('decrement')
    }
})

main.js当中不需要important Vuex from 'vuex';Vue.use(Vuex)这两段代码,因为你在·store.js·中已经引入并使用vuex了，然后在你的按钮事件方法中如此调用:

add(){
   this.$store.dispatch('increment')
},
reduce(){
   this.$store.dispatch('decrement')
}