Vue.js - vuex - 《编程学习笔记》

注意事项
1.概念
2.何时使用？
3.搭建vuex环境
4.基本使用
6.四个map方法的使用
7.模块化+命名空间

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

vuex - 图1

注意事项

vuex本质是一个js对象，是内存中的一块空间，刷新后数据会丢失
为什么要Actions? 不直接到mutations？
1. 为了在actions中做异步ajax请求，拿到数据后再通知mutatios修改
2. actions做一些判断后通知mutatios修改而不是让mutatios来做判断
3. vue允许直接通过commit，可以跳过actions。
Actions下一步是利用commit联系mutations 为什么还要给其他参数（第一个参数，第二个是value）？
1. 当逻辑复杂时dispatch可以调用自身的方法一步一步加工下去，最后再传给mutatios
2. state可以拿数据做判断

1.概念

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

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

npm install vuex --save@3
创建文件：src/store/index.js
```javascript //引入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 })


2.  在`main.js`中创建vm时传入`store`配置项  
```javascript
......
//引入store
import store from './store'
......

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store //不执行vue.use(vuex)时 store默认会被系统删除。use之后所有组件实例对象上都有$store对象
})

4.基本使用

初始化数据、配置actions、配置mutations，操作文件store.js
```javascript //引入Vue核心库 import Vue from ‘vue’ //引入Vuex import Vuex from ‘vuex’ //引用Vuex Vue.use(Vuex)

const actions = { //响应组件中加的动作 jia(context,value){ // console.log(‘actions中的jia被调用了’,miniStore,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, })


2.  组件中读取vuex中的数据：`$store.state.sum` 
2.  组件中修改vuex中的数据：`$store.dispatch('action中的方法名',数据)` 或 `$store.commit('mutations中的方法名',数据)`  
> 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写`dispatch`，直接编写`commit`


<a name="d3beec2b"></a>
### 5.getters的使用

1.  概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。 
1.  在`store.js`中追加`getters`配置  
```javascript
......

const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

//创建并暴露store
export default new Vuex.Store({
    ......
    getters
})

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

6.四个map方法的使用

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

…mapState([‘sum’]) 将 this.sum 映射为 this.$store.state.sum

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

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

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

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

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

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

…mapActions([‘add’]) 将 this.add() 映射为 this.$store.dispatch(‘add’)

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

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

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

…mapMutations([‘ADD’]), 会将 this.ADD 映射成 this.$store.commit(‘ADD’)

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

    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

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

7.模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确。
修改store.js
```javascript const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { … }, actions: { … }, getters: { bigSum(state){ return state.sum * 10 } } }

const personAbout = { namespaced:true,//开启命名空间 state:{ … }, mutations: { … }, actions: { … } }

const store = new Vuex.Store({ modules: { countAbout, personAbout } })


3.  开启命名空间后，组件中读取state数据：  
```javascript
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),