单页面中使用多组件并使用vux通信

1. './store/index.js'

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1
    },
    getters: {
        getCount: function(state) {
            return state.count + 1
        }
    },
    mutations: {
        add(state) {
            state.count = state.count + 1
        },
        reduce(state) {
            state.count = state.count - 1
        }
    },
    actions: {
        addAction({ commit }) {
            commit('add');
        }
    }
})

export default store

2. 'HelloWord'组件：

3. 路由中配置嵌套子组件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld,
            children: [{
                path: '/Test',
                name: 'Test',
                component: Test
            }]
        }
        // {

        // }
    ]
})

路由要配置嵌套子组件，如果直接配置

path: '/Test',
name: 'Test',
component: Test,

会渲染到App.vue中的的最外层组件中，不会渲染到HelloWorld的router-view中

4. 子组件 'Test'

5.在父组件中显示子组件，父组件对vuex中count的增减会同步到子组件