第五章：Vuex

5.1：理解vuex

• vuex是什么

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

• 什么时候使用Vuex

  1. 多个组件依赖同一状态
  2. 来自不同组件的行为需要变更同一状态
     

• VueX流程图
  

• 搭建vuex环境

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

     import Vue from 'vue'		// 引入Vue核心库
     import Vuex from 'vuex'		// 引入Vuex
     Vue.use(Vuex)			   // 应用Vue插件 
     
     const actions = {};		   // 准备actions对象————响应组件中用户的动作
     const mutations = {};	   // 准备mutations对象————修改state中的数据
     const state = {};		   // 准备state对象————保存具体的数据 
     
     export default new Vuex.Store({		// 创建并暴露store
         actions,
         mutations,
         state,
     });
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13

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

     ......
     //引入store
     import store from './store'
     ......
     //创建vm
     new Vue({
     	el:'#app',
     	render: h => h(App),
     	store
     })
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10

5.2：vue核心概念和AIP

• 基本使用

  1. 初始化数据

     // index.js中
     const actions = {
     	jia(context,value){
     		context.commit('JIA',value)
     	},
     }
     const mutations = {
     	JIA(state,value){
     		state.sum += value
     	}
     }
     
     const state = {
        sum:0
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15

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

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

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

• getters的使用

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

  2. 在index.js中追加getters配置。

     const getters = {
         bigSum(state) {
             return state.sum * 10;
         }
     }
     1
     2
     3
     4
     5

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

• 四个map方法的使用

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

     computed: {
         ...mapState({sum:'sum',school:'school',subject:'subject'}),
         ...mapState(['sum','school','subject']),
     },
     1
     2
     3
     4

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

     computed: {
         ...mapGetters({bigSum:'bigSum'}),
         ...mapGetters(['bigSum'])
     },
     1
     2
     3
     4

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

     methods:{
         ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
         ...mapActions(['jiaOdd','jiaWait'])
     }
     1
     2
     3
     4

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

     methods:{
         ...mapMutations({increment:'JIA',decrement:'JIAN'}),
         ...mapMutations(['JIA','JIAN']),
     }
     1
     2
     3
     4

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

• 模块化和命名空间

  1. 目的：让代码更好维护，让多种数据更加明确。

  2. 修改store.js

     const countAbout = {
       namespaced:true,//开启命名空间
       state:{ ... },
       mutations: { ... },
       actions: { ... },
       getters: { ... }
     }
     const personAbout = {
      // 更上面类似写法
     }
     const store = new Vuex.Store({
       modules: {
         countAbout,
         personAbout
       }
     })
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16

  3. 开启命名空间，组件中读取state数据。

     //方式一：自己直接读取
     this.$store.state.personAbout.list
     //方式二：借助mapState读取：
     ...mapState('countAbout',['sum','school','subject']),
     1
     2
     3
     4

  4. 开启命名空间，组件中读取getter数据

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

  5. 开启命名空间，组件中读取dispatch

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

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

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