Vuex

Vuex介绍

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

2.何时使用：多个组件需要共享数据时

3.搭建vuex环境：1.创建文件：src/store/index.js

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

//准备actions:用于响应组件中的动作
const actions={}
//准备mutations:用于操作数据（state）
const mutations={}
//准备state:用于存储数据（state）
const state={}

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

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

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

使用案例：

context:minstore，缩水的store

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

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

3.如果没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接写commit，actions中，如果业务逻辑过于复杂，可以拆分成几个函数，不断dispatch调用新的函数去执行

4.getters的使用：

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

2.再store.js中追加gettres配置

const getters={
    bigSum(state){
        return state.sum*10
    }
}
export default new Vuex.store({
    getters
})

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

5.四个map方法的使用：mapState、mapGetters、mapActions、mapMutations

**1.mapState:**用于帮助我们映射state中的数据为计算属性

computed:{
    //借助mapState生成计算属性：sum、school、subject（对象写法）
    ...mapState({sum:'sum',school:'school',subject:'subject'})
    //借助mapState生成计算属性：sum、school、subject（数组写法）,计算属性的名字需要和state中的Key一致
    ...mapState(['sum','school','subject'])
}

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

computed:{
    //借助mapGetters生成计算属性：bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'})
    //借助mapGetters生成计算属性：bigSum(数组写法)
    ...mapGetters(['bigSum'])
}

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

methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    //靠mapActions生成:incrementOdd、incrementWait(数组形式),方法名需要与actions中的相同
    ...mapActions(['jiaOdd','jiaWait'])
}

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

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

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