Vuex 的用法

什么是 vuex

vuex是vue的全局状态的管理工具，vuex数据更新,其引用组件都会响应式的更新
vuex 代码一般放在项目的 src/store/index.js

使用 vuex的好处

1、数据的存取一步到位，不需要层层传递

2、数据的流动非常清晰

3、存储在Vuex中的数据都是响应式的

那么我们先来思考一个问题：什么样的数据适合存储到Vuex中？

答案是：需要共享的数据，例如购物车的数据，用户界面数据等

Vuex的作用就是：频繁、大范围的数据共享

vue官方提供的独立于组件体系之外的，管理公共数据的工具

一张图了解 vuex

简单来说：action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据， 应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。异步逻辑都应该封装到 action 里面。

vuex模块

vuex分为五个大块

• state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
• mutations ： 使用它来修改数据(类似于methods)
• getters： 类似于 computed 计算属性，对现有的状态进行计算得到新的数据
• actions：发起异步请求
• modules：存储模块数据

在 store/index.js 配置相关代码，具体如下：

import Vue from 'vue'
import Vuex from 'vuex'
​
Vue.use(Vuex)
​
const store = new Vuex.Store({
  	state(){
      // 就是公共的数据，所有的组件都可以直接使用
      count: 100
  	}
  // getter 从现有数据计算新的数据
 	getters: {},
	// mutations 是改变数据state的唯一方式
	// 建议大写
	mutations: {},
	// 发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部
	actions: {},
	// 用来引入模块数据
	modules: {}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

五大模块数据格式

state

state:{
    cartNum:10
}
1
2
3

mutations

 // 每一项都是一个函数，可以声明两个形参
 // mutation名1：function(state [, 载荷]) {},
 // mutation名2：function(state [, 载荷]) {}

SET_CARTNUM(state, data) {
			state.CartNum = data
		}
1
2
3
4
5
6
7

getters

// state 就是上边定义的公共数据state
// getter的名字1: function(state) {
// return 要返回的值
// }

fee: function(state) {
			return state.price * 0.5
		}
1
2
3
4
5
6
7
8

actions

setCart(context, data) {
	// 1. 发异步请求, 请求数据
    // 2. commit调用mutation来修改数据
			setTimeout(() => {
				context.commit('SET_CARTNUM', data)
			}, 4000)
		}
1
2
3
4
5
6
7

modules

user
// 这里模块调用的时候前面需要引入
// import user from './modules/user'
1
2
3

外部调用 vuex 的方法

// !!!!!! 调用的时候需要导入方法
// 导入 vuex 映射关系
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
1
2
3
4
5
6
7
8

1. 外部调用 state 方法

直接使用： this.$store.state.xxx;
map辅助函数：
computed: {
…mapState([‘xxx’]),
…mapState({‘新名字’: ‘xxx’})
}

2. 外部调用 mutations 方法

直接使用：this.$store.commit(‘mutation名’, 参数)
map辅助函数：
methods: {
…mapMutations([‘mutation名’]),
…mapMutations({‘新名字’: ‘mutation名’})
}

3. 外部调用 getters 方法

直接使用：$store.getters.getter的名字 来访问
map辅助函数：
computed: {
…mapGetters([‘xxx’]),
…mapGetters({‘新名字’: ‘xxx’})
}

4. 外部调用 actions 方法

直接使用：在组件中通过this.$store.dispatch(‘actions的名字’, 参数)来调用action
map辅助函数：
methods: { …mapActions([‘actions名’]), …mapActions({‘新名字’: ‘actions名’}) }

5. 访问模块中的的数据

获取数据项： {{$store.state.模块名.数据项名}}

获取getters： {{$store.getters[‘模块名/getters名’]}}

$store.commit(‘mutations名’) // namespaced为false

$store.commit(‘模块名/mutations名’) // namespaced为true

组件中访问 mutatioins,actions 中的方法,不需要添加模块名