Vue的vuex

概念

1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。适用于任意组件间通信.
2,以下是vuex的数据流程图:数据变化可以提交Dispatch到actions,处理异步事件,最终使用mutation改变state数据.也可以直接提交commit到mutation,改变state数据.state数据变化,会更新视图.

一般什么情况下使用vuex?

1.多组件依赖于同一状态。
2.来自不同组件修改同一状态。
以下是vuex的基础配置包含state,getter,actions,mutation:

// store文件下的personInfo
//state保存具体的数据
const state = {
name:'lily',
age:20
}
//getters处理计算属性
const getters={
	upAge(state){
		return atate.age++
	}
}
//响应组件异步动作dispatch提交changeName方法1秒后名字修改为coco
const actions = {
changeName(context,vul){
setTimeout(()=>{
//1秒后提交mutation修改名字
context.commit('UP_NAME','coco')
},1000)
}
}
//mutations改state中的数据
const mutations = {
[UP_NAME](state,payload){
state.name=payload
}
}
//创建并暴露store
export default{
   namespaced:true, // 开起命名空间
	state,
	getters,
	actions,
	mutations,
}

store

store相当于一个容器,管理state,getters,actions,mutations

// store下的index.js文件
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import personInfo from './personInfo'
//应用Vuex插件
Vue.use(Vuex)

export default new Vuex.Store({
	modules:{
		personInfo
	}
})

state

用于存储状态数据,初始化数据

//state保存具体的数据
const state = {
name:'lily',
age:20
}

组件中读取数据：$store.state.sum

actions

组件中修改vuex中的数据：$store.dispatch(‘action中的方法名’,数据)

//响应组件异步动作dispatch提交changeName方法1秒后名字修改为coco
const actions = {
changeName(context,vul){
setTimeout(()=>{
//1秒后提交mutation修改名字
context.commit('UP_NAME','coco')
},1000)
}
}

mutations

1.改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
2.组件中修改vuex中的数据:$store.commit(‘mutations中的方法名’,数据)

//mutations改state中的数据
const mutations = {
[UP_NAME](state,payload){
state.name=payload
}
}

getters

可以理解文store的计算属性,接受state为第一个参数.

//getters处理计算属性
const getters={
	upAge(state){
		return atate.age++
	}
}

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

module

用组管理命名空间

mapState

1.用于帮助我们映射state中的计算属性

// 使用方法
computed:{
// 借助mapState生成计算属性(对象写法)
...mapState({arr1:'arr1',arr2:'arr2'})
// 借助mapState生成计算属性(数组写法)
...mapState(['arr1','arr2'])
}

mapGetter

1.用于帮助我们映射getters中的计算属性

// 使用方法
computed:{
// 借助mapGetters生成计算属性(对象写法)
...mapGetters({arr1:'arr1',arr2:'arr2'})
// 借助mapGetters生成计算属性(数组写法)
...mapGetters(['arr1','arr2'])
}

mapActions

1.用于帮助我们生成actions中的对象方法

// 使用方法
methods:{
// 借助mapActions生成arr1,arr2(对象写法)
...mapActions({arr1:'arr1',arr2:'arr2'})
// 借助mapGetters生成arr1,arr2(数组写法)
...mapActions(['arr1','arr2'])
}

mapMutations

1.用于帮助我们生成mutations中的对象方法

// 使用方法
methods:{
// 借助mapMutations生成计算属性(对象写法)
...mapMutations({arr1:'arr1',arr2:'arr2'})
// 借助mapMutations生成计算属性(数组写法)
...mapMutations(['arr1','arr2'])
}