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

Posted

技术标签:

【中文标题】如何使用 vuex 和 vue-router 在后端和前端之间同步状态?【英文标题】:How to sync states between backend and frontend using vuex and vue-router? 【发布时间】:2019-08-13 13:08:11 【问题描述】:

我正在使用 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 实例并提供全局 storerouter 实例。

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 的概念,那就太棒了。

【问题讨论】:

嘿,也许你可以同步这个:github.com/vuejs/vuex-router-sync 我不明白你的后端,它只是另一个vue文件,还是一个实际的服务器? 感谢@LeonardKlausmann,但我已经在使用 vuex-router-sync,正如您在 main.js 中的 sync(store, router) 中看到的那样乙>。但我想这只是为了在 vuex 状态下同步 vue-router 的当前路由。因此不是我的问题的解决方案。 @I'mOnlyVueman 它只是另一个与 Frontend.vue 内容相同的 vue 文件。我试图让应用程序尽可能简单,以便让 vuex 正常工作。 那么,如果您希望状态反映后端文件,您需要做的是:1)在后端创建一个保存当前计数器值的道具 2)在前端,创建一个 beforeMount( ) 函数,它将后端 prop 作为参数并将其用作 vuex 突变的有效负载。推荐使用 mapMutations 从函数中触发突变。 3) 创建前端时,beforeMount 函数会从后端读取 prop,然后使用 prop 值提交一个突变以更新状态。 4)当前端挂载时,状态应该有你想要的值 【参考方案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

【讨论】:

【参考方案2】:

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

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

【讨论】:

当我在前端引用 $store.state.counter 之类的状态时,我的情况比以前更糟。 counter 的值不再更新(使用 getCounter() 方法它以前有效,但仅限于前端组件)。而且在后端状态也没有更新,因为这是我提出问题的原因。

以上是关于如何使用 vuex 和 vue-router 在后端和前端之间同步状态?的主要内容,如果未能解决你的问题,请参考以下文章

vuejs2:如何将 vuex 存储传递给 vue-router 组件

如何在 Vuex 模块 Actions 中使用 vue-router?

如何在 vuex 商店中使用 vue-resource ($http) 和 vue-router ($route)?

使用 Vuex 和 vue-router

Vuex 状态和 vue-router

Vue3.0全家桶最全入门指南 - vue-router@4.x和vuex@4.x (3/4)