关于 Vuex 的作用与常见用法 ——详解（初学者也能看懂）_vuex详解和用法

一、Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（引用官网原话）

解释：Vuex 的功能就是专门接收并管理数据，支持对数据状态进行更新变化（和组件通信传递数据类似，只不过数据只能在组件与组件之间传递，如果数据太多的话就不好处理）
Vuex 可以将多个组件的共同状态/数据提取出来，用一个全局单例模式管理（类似一个小型数据库），其优势在于多个组件可以共享使用 Vuex 的数据

二、安装存在的问题

如果你使用的是 Vue2 的框架，那么安装 Vuex 4以后的版本会进行报错，Vuex 3及以前的版本才支持 Vue2 框架

三、应用场景（简洁）

使用 Vuex —— 中大型应用
不使用 —— 小型应用

四、核心概念（五大状态）

——借用 Vue 官网的图片

Actions（对象写法）

一般负责数据接入处理，接入 API 的数据，并进行相应的操作，通过调用 context 里面commit 方法，将数据递交到下一层（mutation）

（注意：actions 不能对 state 里面的数据进行修改，只有 mutations 才能实现，但它可以提交事件，通知 mutations 进行 state 数据的修改）

actions 里面，每个 action 都能接收两个参数：

actions:{
	// data 为调用 actionFun 时传入的数据
	actionFun(context,data){
		// 可以对 data 进行操作，将操作完后的值赋给 value
		let value
		value = data
		context.commit('mutationFun',value)
	}
}
1
2
3
4
5
6
7
8
9

action 可使用如下代码触发

• 方法一：

//	第一个参数为 actions 内定义的函数名(双引号和单引号都可)，第二个是要传入的数据
this.$store.dispatch('fun',data)
1
2

支持异步操作

//	Action 一般都是异步的，它可以处理 action 里面的 Promise
this.$store.dispatch("action",data).then(() => )
1
2

• 方法二：（在 methods 使用）

// 需要提前引入 mapActions
import {mapActions} from 'Vuex'
// 数组作为参数传入便捷
methods:{
	// 利用数组传入多个函数
	...mapActions(["fun","函数名"])
	// 对象重命名写法
	...mapActions({Fun:'fun',Fun1:'fun1'})
	// 上面两种写法适合所有的方法二,下面不再诉说
	
	// 调用
	request(){
		this.fun()
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

actions 里面一般应用在异步发送请求数据事件的场景中，可以进行一些逻辑操作

Mutations（对象写法、必须是同步函数——原则）

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数（官网原话）

作用：对 state 仓库里面的数据进行逻辑操作

mutations:{
	mutationFun(state,data){
	// 状态更改
	// data 就是 actionFun 函数中 commit 过来的 value
		state = data + state.count++
	}
}
1
2
3
4
5
6
7

组件当中可通过以下代码调用 mutations
方法一：

//	第一个参数为 actions 内定义的函数名，第二个是要传入的数据
this.$store.commit('xxx'，data)
1
2

方法二：（在 methods 使用）

// 需要提前引入mapMutations
import {mapMutations} from 'Vuex'
// 同 Actions 写法
methods:{
	...mapMutations(["函数名","函数名"])
}
1
2
3
4
5
6

到这里可以发现 action 的操作貌似是多余的，本可以直接使用 $store.commit 来将 state数据进行处理，不！还记得 mutations 的原则吗？mutations 必须是同步函数

实质上任何在回调函数中进行的状态的改变都是不可追踪的

在其回调函数中进行异步操作，会使得异步操作失效，另一方面就是不利于 devtools 捕捉到前一状态和后一状态的快照

State 仓库

存储共享数据，在组件中引入后即可使用，以下是使用方法：

• 方法一：

state:{
	shop:[
		{name:'木瓜牛奶'，price:10},
		{name:'麻辣香锅'，price:50},
		{name:'可口可乐'，price:5 }
	]
}
//	在组件中使用
console.log(this.$store.state.shop[0].name) // 木瓜牛奶
1
2
3
4
5
6
7
8
9

• 方法二：（常在 mounted 使用，computed 也可以）

// 需要提前引入 mapState
import {mapState} from 'Vuex'

mounted(){
	// 同 Actions 写法
	...mapState(["属性名","属性名"])
}
1
2
3
4
5
6
7

getters （对象写法）

getters 是一种计算属性，可以对 state仓库里面的数据进行加工（类似计算属性，也有缓存，而且 getters 不会改变 state 的数据），以下是使用方法：

• 方法一：

getters:{
	//	获取食物总价格
	totalNum(state){
		return state.shop.reduce((total,item,index,shop) => {
			return total + item.price
		},0)
	}
}
1
2
3
4
5
6
7
8

• 方法二：（在 computed 使用）

// 需要提前引入mapGetters
import {mapGetters} from 'Vuex'
computed:{
	// 同 Actions 写法
	...mapGetters(["函数名","函数名"])
}
1
2
3
4
5
6

以上步骤应对一些小型的应用已经足够了，如果你开发的是中大型应用，接下来的Module 特性你可以了解一下

Module（中大型应用常用）

为了方便数据维护和管理，Vuex 将 store 分割成模（module）每个模块拥有自己的 state、mutations、actions、getters

原本一个大仓库，分成多个小仓库，每个仓库都有和原来大仓库一样的功能，它们集合才一起就成为了一个大仓库

代码如下：（截图来源 Vue官网）
state 采用了箭头函数的写法，也可以直接使用对象写法，这里建议使用箭头函数的写法

需要注意的是：

其内部还是将所有的 Actions、Mutations、Getters、state 通过全局暴露出来使所有组件都能看到，调用时所有的函数都在同一级，因此每个模块之间的函数尽量不要重名
调用方法和前面方法一、二 一致

为了解决这个问题，可以开启 namespace : true，让其成为带命名空间的模块

在调用方法是需要按照小仓库路径来调用

// 属性名也要指定路径
this.$store.dispatch('home/fun',data)
console.log(this.$store.state.home.address) // china
1
2
3

五、引入方式

不使用 Module 引入方式（小型应用，只需要一个大仓库）

• 在 store 文件夹中的 index.js 写入以下代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 	全局暴露实例
export default new Vuex.store({
	action:{
	},
	mutations:{
	},
	state:{
	},
	getters:{
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 在 main.js 中引入

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store （上面自己命名的文件夹）
import store from './store'

new Vue({
	el:'#app',
	store,
	render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12

以中大型应用为背景，利用 module 特性分成多个小仓库

文件目录：
– store
 |-- Home
   |-- index.js
 |-- Detail
   |-- index.js
 |-- Shop
   |-- index.js
 |-- index.js

• 创建一个文件夹（随意命名，一般为 store，这里设置以 store 命名的文件夹）在 内部创建 index.js 文件，在内部进行如下配置（大仓库）

import Vue from 'vue'
import Vuex from 'vuex'

import Home from '../../page/Home'
import Detail from '../../page/Detail '
import Shop from '../../page/Shop'

Vue.use(Vuex)
//	引入小仓库
import Home from './Home'
import Detail from './Detail'
import Shop from './Shop'

// 	全局暴露实例
export default new Vuex.store({
	modules:{
		Home,
		Detail,
		Shop
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 小仓库内部（Home / index.js）

namespace:true
let actions:{
	fun(){
		
	}
}
let mutations:{....}
let getters:{....}
let state:{
	address:'china'
}

//对外暴露
export default {
     actions,
     mutations,
     getters,
     state,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 在 main.js 文件中简单引入一下（Vuex引入）

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store （上面自己命名的文件夹）
import store from './store'

new Vue({
	el:'#app',
	store,
	render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12

OK啦，常用的操作都已经一一列出来了，如有错漏欢迎指正！