我正在使用vue-cli3和npm开发单页面应用程序。
问题:填充一个名为counter的基本整数值(存储在vuex状态),后者在后端递增/递减到前端,后者显示新值。
增量/减量突变在两个组件(前端/后端)上工作正常,但似乎突变在同一路由实例上不起作用:在后端递增/递减计数器时,前端不会更新该值否则。
store.js:
包含需要在Backend / Frontend之间同步的状态。
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实例并提供全局存储和路由器实例。
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:
两者(前端/后端)在这里使用相同的代码。他们使用状态计数器来显示和修改它。
<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的概念,那将是非常棒的。