Vue 学习笔记09：Vuex

一、Vuex 是什么

• 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
• 什么时候使用 Vuex：
  （1）多个组件依赖于同一状态（数据）
  （2）来自不同组件的行为需要变更同一状态（数据）

二、搭建 Vuex 环境

• Vue2 只能用 Vuex3，Vue3 只能用 Vuex4，默认安装的是最新版，所以安装时要指定版本为 Vuex3

npm i vuex@3

• 搭建 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 = { a: 1 }

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

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

import ......
// 引入store
import store from './store'

new Vue({
    el: '#app',
    render: h => h(App),
    store
})

三、基本使用

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

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 配置 actions
const actions = {
    jia(context, value) {
        context.commit("JIA", value);
    },
}

// 配置 mutations
const mutations = {
    JIA(state, value) {
        state.num += value
    },
}

// 初始化数据
const state = {
    num: 0
}

// 创建并暴露 store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2. 组件中读取 vuex 中的数据：$store.state.num
3. 组件中修改 vuex 中的数据：$store.dispatch('actions中的方法', 数据) 或 $store.commit('mutations中的方法', 数据)

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

四、getters的使用

1. 概念：当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工。
2. 在 index.js 中追加 getters 配置，getters 必须写返回值。

......

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

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

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

五、四个 map 方法的使用

1. mapState

用于帮助我们映射 state 中的数据为【计算属性】

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

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

2. mapGetters

用于帮助我们映射 getters 中的数据为【计算属性】

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

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

3. mapActions

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

methods:{
	// 借助 mapActions 生成方法（对象写法）
	...mapActions({increment:'jiaOdd', decrement:'jiaWait'})

	// 借助 mapActions 生成方法（数组写法）
	...mapActions(['jiaOdd', 'jiaWait'])
}

4. mapMutations

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

methods:{
	// 借助 mapMutations 生成方法（对象写法）
	...mapMutations({increment:'JIA', decrement:'JIAN'})

	// 借助 mapMutations 生成方法（数组写法）
	...mapMutations(['JIA', 'JIAN'])
}

5. 备注

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

六、vuex模块化

1. 编写模块化文件

1. 目的：让代码更好维护，让多种数据分类更加明确。
2. 在 store 下新增 count.js 和 person.js
   
3. 在各自的 js 文件中编写 vuex 配置，在每个 js 文件中都要写入namespaced: true配置项以开启命名空间
   
   
4. 在 index.js 中引入两个模块

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 引入模块
import count from './count'
import person from './person'

// 创建并暴露 store
export default new Vuex.Store({
    modules: {
        count, person
    }
})

2. 获取模块中的数据

下面的符号表示

xxx：vuex模块名
data：vuex模块中的数据
function：与 Actions 通信的 dispatch 方法
value：传给方法的参数（数据）
fname：在组件中给方法取得名字
FUNCTION：与 mutations 通信的 commit 方法

• 开启命名空间后，组件中读取 state 数据：
  方式一：自己直接读取 this.$store.state.xxx.data
  
  方式二：借助 mapState 读取 ...mapState("xxx", ["data", ...])
  

• 开启命名空间后，组件中读取 getters 数据：
  方式一：自己直接读取 this.$store.getters["xxx/data"]
  
  方式二：借助 mapGetters 读取 ...mapGetters("xxx", ["data", ...])
  

• 开启命名空间后，组件中调用 dispatch
  方式一：自己直接读取 this.$store.dispatch('xxx/function', value)
  
  方式二：借助 mapActions 读取 ...mapActions("xxx", ["function", ...]) 或 ...mapActions("xxx", {fname:"function", ...})
  

• 开启命名空间后，组件中调用 commit
  方式一：自己直接读取 this.$store.commit('xxx/FUNCTION', value)
  
  方式二：借助 mapMutations 读取 ...mapMutations("xxx", ["FUNCTION", ...]) 或 ...mapMutations("xxx", {fname:"FUNCTION", ...})