多组件共享-vuex

1、解决多个组件共享同一状态数据问题
1）多个视图共享同一状态
2）来自不同视图的触发事件需要变更同一状态
文档API：https://vuex.vuejs.org/zh/api/

2、组件与store连接桥梁
new Vue({
　　el: '#app',
　　router,
　　components: { App },
　　template: '<App/>',
　　store // 所有的组件多了一个 $store属性
})
1）模板显示 $store.state.xxx
2）计算属性 this.$store.getters.yyy
3）触发事件 this.$store.dispatch('') 来调用actions中函数

actions：

1、存放触发事件函数的对象
2、通过执行commit('') 调用mutations中函数间接更新state
mutations：存放更新状态函数的对象
state： 存放状态的对象
getters： 存放计算属性函数的对象

1、store.js文件
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const state = {
  num: 0
}
const mutations = {
  addNums: function (state) {
    state.num++
  },
  releaseNums: function (state) {
    state.num--
    if (state.num < 0 ){
      state.num = 0
    }
  }
}
const actions = {
  addNum: function ({commit}) {
    commit('addNums')
  },
  releaseNum: function ({commit}) {
    commit('releaseNums')
  }
}
const getters = {
  reverseonum: function (state) {
    return state.num * 2
  }
}
export default new Vuex.Store({
   state,
   mutations,
   actions,
   getters
})
2、组件
<template>
  <div>
    <div>
      <button @click="release">减少</button>
      <input type="text" v-model="$store.state.num"/>
      <button @click="add">增加</button>
    </div>
    <div>
       {{ reversedMessage }}
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    reversedMessage: function () {
      return this.$store.getters.reverseonum
    }
  },
  methods: {
    add: function () {
      this.$store.dispatch('addNum')
    },
    release: function () {
      this.$store.dispatch('releaseNum')
    }
  }
}
</script>
【简化方式】
<template>
  <div>
    <div>
      <button @click="releaseNum">减少</button>
      <input type="text" v-model="num"/>
      <button @click="addNum">增加</button>
    </div>
    <div>
       {{ reverseonum }}
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState(['num']), //返回值{ num(){ return this.$store.state['num']}}
    ...mapGetters(['reverseonum'])
//返回值{ reverseonum(){ return this.$store.state['reverseonum']}}
//这里等同于 ...mapGetters({reversedMessage: 'reverseonum'}) ，所以上面只是前后方法名需相同
  },
  methods: {
    ...mapActions(['addNum', 'releaseNum'])
  }
}
</script>