关于vue.js:Vue-Vuex状态管理

1.1 了解 Vuex

1.1.1 Vuex 是什么

1. 概念：专门在 Vue 中实现集中式状态（数据）治理的一个 Vue 插件，对 Vue 利用中多个组件的共享状态进行集中式的治理（读 / 写），也是一种组件间通信的形式，且实用于任意组件间通信。
2. Github 地址

1.1.2 什么时候应用 Vuex

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

1.1.3 Vuex 工作原理图

<img src=”https://vuex.vuejs.org/flow.png” alt=”flow.png” style=”zoom:67%;” />

1.2 搭建 Vuex 环境与根本应用

1.2.1 环境 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 对象——保留具体的数据
   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
       })

1.2.2 根本应用

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 被调用了',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

3. 组件中批改 Vuex 中的数据：$store.dispatch('action 中的办法名', 数据) 或 $store.commit('mutations 中的办法名', 数据)

   备注：若没有网络申请或其余业务逻辑，组件中也能够越过 actions，即不写 dispatch，间接编写 commit

1.3 Vuex 外围概念和 API

1.3.1 state

1. Vuex 治理的状态对象
2. 它应该是惟一的

3. 示例代码：

   const state = {sum:0}

1.3.2 actions

1. 值为一个对象，蕴含多个响应用户动作的回调函数
2. 通过 commit() 来触发 mutation 中函数的调用，间接更新 state

3. 如何触发 actions 中的回调？

   在组件中应用：$store.dispatch('对应的 action 回调名') 触发

4. 能够蕴含异步代码（定时器,ajax 等等）

5. 示例代码：

   const actions = {
       // 响应组件中加的动作
       jia(context,value){// console.log('actions 中的 jia 被调用了',miniStore,value)
           context.commit('JIA',value)
       },
   }

1.3.3 mutations

1. 值是一个对象，蕴含多个间接更新 state 的办法

2. 谁能调用 mutations 中的办法？如何调用？

   在 action 中应用：commit('对应的 mutations 办法名') 触发

3. mutations 中办法的特点：不能写异步代码、只能单纯的操作 state

4. 示例代码：

   const mutations = {
       // 执行加
       JIA(state,value){// console.log('mutations 中的 JIA 被调用了',state,value)
           state.sum += value
       }
   }

1.3.4 getters

1. 概念：当 state 中的数据须要通过加工后再应用时，能够应用 getters 加工。

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

   // 筹备 getters —— 用于对 state 中的数据进行加工
   const getters = {bigSum(state){return state.sum * 10}
   }
   
   // 创立并裸露 store
   export default new Vuex.Store({
       ......
       getters
   })

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

1.4 四个 map 办法的应用

1.4.1 mapState 办法

mapState 办法： 用于帮忙咱们映射 state 中的数据为计算属性

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

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

1.4.2 mapGetters 办法

mapGetters 办法： 用于帮忙咱们映射 getters 中的数据为计算属性

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

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

1.4.3 mapActions 办法

mapActions 办法： 用于帮忙咱们生成与 actions 对话的办法，即：蕴含 $store.dispatch(xxx) 的函数

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

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

1.4.4 mapMutations 办法

mapMutations 办法： 用于帮忙咱们生成与 mutations 对话的办法，即：蕴含 $store.commit(xxx) 的函数

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

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

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

1.5 模块化 + 命名空间

1. 业务场景中须要蕴含多个 module，一个 module 是一个 store 的配置对象，与一个组件（蕴含有共享数据）对应
2. 目标：让代码更好保护，让多种数据分类更加明确

进行模块化：

1. 批改 store.js

   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
       }
   })

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

   // 形式一：本人间接读取
   this.$store.state.personAbout.list
   // 形式二：借助 mapState 读取：...mapState('countAbout',['sum','school','subject']),

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

   // 形式一：本人间接读取
   this.$store.getters['personAbout/firstPersonName']
   // 形式二：借助 mapGetters 读取：...mapGetters('countAbout',['bigSum'])

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

   // 形式一：本人间接 dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   // 形式二：借助 mapActions：...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

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

   // 形式一：本人间接 commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   // 形式二：借助 mapMutations：...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),