1. vuex 理解

1.1 vuex是什么

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

1.2 什么时候用Vuex

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

1.3 Vuex原理图

2.基本使用

1.初始化数据、配置actions、配置mutations

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

// 用于响应组件中用户的动作
const actions = {
  // 响应组件中加的动作
  jia(context, value) {
    context.commit('JIA', value)
  }
}

// 修改state中的数据
const 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中的方法名',数据)

3.getters的使用

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

......

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

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

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

4.mapState与mapGetters

// 引入mapState  mapGetters
import { mapState,  mapGetters} from 'vuex'

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

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

2. mapGetters: 帮助我们映射getters中的数据为计算属性

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

5.mapActions与mapMutations

// 引入mapActions  mapMutations
import { mapActions,  mapMutations} from 'vuex'

1. mapActions: 帮助我们生成与actions对话的方法，即包含$store.dispatch('action中的方法名',数据)的函数（action中接收的数据在调用这个函数的时候传过来，比如incrementOdd(数据)）

methods: {
  // 借助mapActions生成:incrementOdd incrementWait （对象写法）
  ...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' })
  
  // 借助mapActions生成：jiaOdd、jiaWait（数组写法）
  ...mapstate([ 'jiaOdd', 'jiaWait'])
}

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

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

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

6.vuex模块化

1. 目的：让代码更好维护，让多种数据分类更加明确。
2. 修改store.js

const countAbout = {
 namespace: true, // 开启命名空间
 state: { x:1 },
 mutations: { ... },
 actions: { ... },
 getters: {
   bigSum(state) {
     return state.sum * 10
   }
 }
}

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

//上面两个配置建议写到别的文件引入进来

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

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

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

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

  // 方式一：自己直接读取
  this.$store.getters.['personAbount/list']
  // 方式二：借助mapGetters读取
  ...mapGetters('personAbount', ['sum', 'school', 'subject'])

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

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

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

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