如何使用 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'
)
main.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 的概念,那就太棒了。
【问题讨论】:
嘿,也许你可以同步这个: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 () =>
中定义的@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?