vuex 详细介绍和使用

什么是vuex，为什么使用Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式，类似 edux
为处理复杂的组件通信，所以使用的一种状态管理模式

安装vuex

npm i vuex

如何使用vuex

• Vuex 模板

import Vue from 'vue'
import Vuex from 'vuex'
import about from '@/store/about'

Vue.use(Vuex)

export default new Vuex.Store({
 	state: {  
 	},
 	getters: {    
 	},
 	mutations: {
 	},
 	actions: {
 	},
 	modules: {
 	}
})

如何在组件中获取vuex里的内容

this.$store.state.value

使用辅助函数获取：

...mapState(['aa','bb'])

vuex的五种状态？

state：仓库中唯一存放数据的地方。（类似于组件中的data，存放大量的数据，数据相对 getters 固定）
getters：唯一存放派生数据的地方。

• 派生数据 === 计算属性

mutations：唯一修改state数据的地方。（存放着各种函数，类似于组件中的methods）
actions：唯一处理异步操作的地方。（存放异步的操作）

• ps：处理完成得到结果后，通过commit来调用mutations中的方法

modules：存放着其他子仓库的引用

mutaions和actions里的参数？

mutations里的方法有两个参数，第一个参数默认为state，第二个参数为传递的值

actions里的方法有两个参数，第一个参数默认为整个$store，第二个参数为传递的值

vuex的工作流程

• 同步操作：

this.$store.commit('addclick',value)	
mutations(){
	addclick(state,data){
		console.log(state,'可以获取到state里所有的内容')
		console.log(data,'从组件里传递过来的参数')
	}
}

• 异步操作：

this.$store.dispatch('addclick',value)
mutations(){
	addclicks(state,data){
		console.log(state,'可以获取到state里所有的内容')
		console.log(data,'从组件里传递过来的参数')
	}
}

actions(){
	addclick({state,commit},data){
		commit('addclicks',data)
	}
}

vuex的辅助函数

使用辅助函数必须要进行引入

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	
computed:{
	...mapState(['aa','bb'])
	...mapGetters(['aa','bb'])
}
methods:{
	...mapMutations(['aa','bb'])
	...mapActions(['aa','bb'])
}

vuex如何使用子模块

新建一个js子文件：

export default {
	// 作为子仓库存在时，需要开启命名空间
	namespaced:true,
	state: {},
	getters: {},
	mutations: {},
	actions: {},
	modules: {}
}

在原来的vuex里

import aa from '@/store/aa.js'
export default new Vuex.Store({
	modules:{
		A : aa
	}
})

在vue组件中引入

this.$store.state["A/list"];

---

总结：

以上就是vuex的使用方法，如果要学习其他的方法，可以去看我的其他文章
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog