5.vuex

1. vuex

1.1. 基本介绍

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

使用场景：多个组件依赖与同一状态； 来自不同组件的行为需要变更同一状态

都通过store管理

1.2. 环境搭建

• 使用vuex：

  npm i vuex

  import Vuex from ‘vuex’ //也可以写在index里面，这样mian.js只需要引入store就可以了

  Vue.use(Vuex) //不能写在main.js里，需写在store文件夹的index里面，同时引入Vue

• 创建store:

  1. 在src里面创建一个store文件夹，用于创建vuex

  2. 里面创建一个index.js文件：

     const actions = {} //用于响应组件中的动作; 默认添加函数参数context

     ​ mutations //用于操作数据，里面函数名尽量用大写，默认添加函数参数state

     ​ state //用于存储数据

     const store = new Vuex.Store({ actions:actions,… }) //创建store，并添加所有配置项

     export default store //可以和上面的合成一句

• 使用store：

  在main.js里面引入store，在new Vue里面添加store:store, 与el平级

1.3. api

1. this.$store.dispatch(‘jia’,this.n)
2. getters配置项：和computed类似，但其数据可以用于所有组件
3. this.$store.commit(‘JIA’,this.n)

---

2. 函数

借助这些函数生成代码块（批量生成函数），记得引入

2.1. mapState

• import {mapState} from ‘vuex’

• ...mapState({he:'sum', xuexiao:'school'}) //写在computed中，会自动去store的state中找对应的属性值，mapState会返回一个对象，…表示将他们每一项展开，里面包含的是生成的函数代码：he(){ return this.$store.state.sum }

• 简写方式（数组形式）：...mapState(['sum','school']) //适用于属性名和属性值相同

2.2. mapGetters

和mapState一样，只不过是从getters中读取数据

2.3. mapMutations

借助其可以生成对应的方法，方法中会调用commit去联系mutations

...mapMutations({increment:'JIA',decrement:'JIAN'}) //代替了自己写commit函数,但是调用函数increment和decrement得传参，代替原本的this.n

一样有数组写法

2.4. mapActions

和mapMutations一样，代替的是dispatch

---

3. vuex模块化

3.1. 创建结构

• const countOptions = {actions:{},mutations,state,getters} //将其分别写成一个个对象（模块）

• 在Store中用modules包裹

  export default new Vuex.Store({
      modules:{
          a:countOptions,
          b:personOptions
      }})
  

3.2. 使用

• 使用的时候也是通过a,b去使用

  …mapState([‘a’,‘b’]) a.sum, a.school

  简写方式：…mapState(‘a’,[‘sum’,‘school’]) //需在countOptions里面添加一个namespaced:true

  ​ 其他几个也是类似的操作，在前面加一个模块名

• 不调用函数自己写：

  this.$store.state.a.sum //在state后面加一个a以表示分类

  this.$store.commit(‘a/ADD_PERSON’,value) //调用commit方法是需加一个/用于确定模块

  this.$store.getters[‘a/firstPersonName’]

3.3. 文件形式

可以直接把一个模块写成一个文件，a.js

然后在index.js文件里面引入并使用