Vuex使用

1. 概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信方式，且适用于任意组件间通信。

2. 何时使用

多个组件需要共享数据时

3. 搭建vuex环境

1. 创建文件：src/store/index.js

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

​
//创建并暴露store
export default new Vuex.store({
        //准备actions对象--响应组件中用户的动作
 const actions = {    ... } ​ 
        //准备mutations对象--修改state中的数据 
const mutations = { ... } ​ 
        //准备state对象--保存具体数据
 const state = { ... }
})

1. 在main.js中创建vm时传入store配置项

....
//引入store
import store from './store/index.js'
....
​
//创建vm
new Vue({
    el:'#app',
    render h => h(App),
    store
})

4. 基本使用

1. 初始化数据、配置actions、配置mutations、操作文件store.js

//引入Vue核心库
import Vue from 'vue'
​
//引入Vuex插件
import Vuex from 'vuex'
​
//引用Vuex插件
Vue.use(Vuex)
​
const actions = {
    jia(context,value){
        //console.log('actions中的jia被调用了',context,value)
        context.commit('JIA',value)
    }
}
​
const mutations = {
    JIA(state,value){
        //console.log('mutations中的JIA方法被调用了',state,value)
        state.sum += value
    }
}
​
//初始化数据
const state = {
    sum:0
}
​
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

1. 组件中读取vuex中的数据：$store.state.sum

2. 组件中修改vuex中的数据：$store.dispatch('actions中的方法名',数据)或者$store.commit('mutations中的方法名',数据)

备注： 若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5. getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2. 在store.js中追加getters配置

...
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}
​
//创建并暴露store
export default new Vuex.Store({
    ...,
    getters,
    ...
})

1. 组件中读取数据：$store.getters.bigSum

6. 四个map方法的使用

1. mapState方法：用于帮助我们映射state中数据为计算属性

//引入mapState方法
import {mapState} from 'vuex'
...
computed:{
     //借助mapState生成计算属性：sum、school、subject（对象写法）
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
        
         //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject'])//仅限于对象写法中的键值对相同时，才能使用数组写法
}

1. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

// 引入mapGetters
import {mapGetters} from 'vuex'
​
...
computed:{
     //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),
     //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
}

1. mapActions方法：用于帮助我们生成与actions对话的方法，即：$store.dispatch(xxx)的函数

//引入mapActions方法
import {mapActions} from 'vuex'
...
methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
​
    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

1. mapMutations方法：用于帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数

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

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。