Ssr, Vuex 模块化时使用dispatch没成功、

fooCount 默认是0 。 在asyncdata处dispatch正常执行后变成foocount变成1了。

自己添加的Add按钮只打印了信息,没有增加fooCount。求解决。

<template>
  <div>
      <p> <button @click="add()">Add</button> </p>
      <p>{{ fooCount }}</p>
      

  </div>
</template>

<script>
import fooStoreModule from '@/store/modules/foo'

export default {
  asyncData ({ store }) {
    store.registerModule('foo', fooStoreModule)
    return store.dispatch('foo/inc') // 正常执行了
  },
  destroyed () {
    this.$store.unregisterModule('foo')
  },

  computed: {
    fooCount () {
      return this.$store.state.foo.count
    }
  },
  methods: {
    add: function() {
        console.log('clicked', this.$store.state.foo.count );
        return this.$store.dispatch('foo/inc')  // 没有增加foo.count
    }
  }
}
</script>