Vuex组建间通信

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• 状态，驱动应用的数据源；

• 视图，以声明方式将状态映射到视图；

• 操作，响应在视图上的用户输入导致的状态变化。
  
  但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。

• 来自不同视图的行为需要变更同一状态。
  

Vuex可以适用于多个组件之间共享数据

安装Vuex

npm install vuex@next --save

搭建Vuex环境：

创建文件src/store/inde.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

在入口文件mian.js添加配置项：

......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

state:初始化存储数据

getters:Vuex 允许我们在 store 中定义“getters”（可以认为是 store 的计算属性）。

mutation:唯一更改state数据状态的方法就是提交mutation，并且它会接受 state 作为第一个参数。

action :action 提交的是 mutation，而不是直接变更状态,并且action 可以进行异步操作。

组件中进行读取数据：$store.state.data

组件中修改vuex中的数据：$store.dispatch('action中的方法名',data)

map方法

mapState：将state中的数据映射为计算属性。

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school']),
},

mapGetters：将getters中的数据映射为计算属性。

computed: {
    //借助mapGetters生成计算属性：getSum（对象写法）
    ...mapGetters({getSum:'getSum'}),

    //借助mapGetters生成计算属性：getSum（数组写法）
    ...mapGetters(['getSum'])
},

mapAction：将action中的数据映射为计算属性。

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutation：将mutation中的数据映射为计算属性。

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}