vuex----不相关组件之间的通信

代码

<template>
    <div class="vuex">
        vuex {{$store.state.count}}
        <button type = 'button' @click = 'increment'>增加</button>
        <button type = 'button' @click = 'decrement'>减少</button>
    </div>


</template>


<script>
import {mapActions} from 'vuex'

export default{
    methods:mapActions([
        'increment',
        'decrement'

    ])
}
</script>


<style>


</style>

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

//声明数据
const state = {
    count：1
}

//改变数据在Matations中做
const mutations = {
    //增加
    increment(state){
        state.count++
    },
    //减少
      decrement(state){
        state.count--
    }
}

//Actions 通知 Mutations 改变数据
const actions = {
     increment:({commit}) => {
        //通过commit通知Mutations
        commit('increment')//参数必须对应想要改变的函数名
     },
     decrement:({commit}) => {
        commit('decrement')
     }
}
//导出模块
export default new Vuex.Store({
    state,
    mutations,
    actions
})