如何使用 vuex 和 vue-router 在后端和前端之间同步状态？

Question

我正在使用 vue-cli3 和 npm 开发一个单页应用程序。

问题：填充一个名为 counter 的基本整数值（存储在 vuex 状态中），该值在后端递增/递减到前端，前端显示新值。

递增/递减突变在两个组件（前端/后端）上都可以正常工作，但突变似乎不适用于同一个路由实例：当递增/递减后端中的计数器时，值 未在前端更新，否则。

store.js：

包含需要在后端/前端之间同步的状态。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 10
  },
  mutations: {
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    }
  }
})

index.js：

定义 vue-router 必须提供的路由。

import Vue from 'vue'
import Router from 'vue-router'
import Frontend from '@/components/Frontend'
import Backend from '@/components/Backend'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Frontend',
      component: Frontend
    },
    {
      path: '/backend',
      name: 'Backend',
      component: Backend
    }
  ],
  mode: 'history'
})

ma​​in.js：

初始化 Vue 实例并提供全局 store 和 router 实例。

import Vue from 'vue'
import App from './App'
import router from './router'
import { sync } from 'vuex-router-sync'
import store from './store/store'

Vue.config.productionTip = false

sync(store, router)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Frontend.vue/Backend.vue：

两者（前端/后端）在此处使用相同的代码。 他们使用状态 counter 来显示和修改它。

<template>
  <div> Counter: {{ getCounter }}
    <br>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Frontend',
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  },
  computed: {
    getCounter () {
      return this.$store.state.counter
    }
  }
}
</script>

如果有人能告诉我我缺少什么或者我误解了 vuex 和 vue-router 的概念，那就太棒了。

Answer 1

只需从商店获取这两个组件的柜台即可。你不需要data，因为 store 已经是响应式的了。

<template>
  <div> Counter: {{ counter }}
    <br>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'Frontend',
  methods: {
    ...mapMutations([
      'increment',
      'decrement',
    ])
  },
  computed: {
    ...mapState({
        counter: state => state.counter,
    })
  }
}
</script>

供参考：

• mapState: https://vuex.vuejs.org/guide/state.html#the-mapstate-helper
• mapMutations: https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components

Answer 2

data () => {} 中定义的@sebikolon 组件属性是反应式的，方法不是，它们被调用一次。而不是{{ getCounter }}，只需使用{{ $store.state.counter }}。 或在每个组件中启动属性来获取你的状态值。

data: function () {
    return {
        counter: $store.state.counter,
    }
}