vuex基本使用

vuex基本使用

简介

文档介绍：

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

简单的理解就是Vuex就类似全局对象，并且提供了获取或更新这个全局对象的方法，可以按照Vuex的方法在全局获取或更新对象。

优点
1.vuex是vue生态的一部分，能够触发响应式的渲染页面更新。
2.限定了一种可预测的方式方便数据，需要把数据提交到mutations里来进行修改

模块

1.State：唯一数据源
2.Getter：允许组件从store中获取数据
3.Mutation：唯一更改store中状态的方法，且必须是同步函数
4.Action：用于提交Mutation
5.module：可以将Store分割成模块。每个模块都有自己的State、Getter、Mutation、Action

State

State是Vuex中的基本数据，state上存放的就是所谓的状态，Vuex使用到的是单一状态树，即用一个对象就包含所有的状态数据。就是所如果我们定义了一个store实例里面就只有一个state。state作为构造器的选项，定义了所有我们需要的基本状态参数。

const state = ()=>({
	messageNum:0,
})

Getter

getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

const getters={
	messageNum:(State)=>state.messageNum
}

在计算属性中使用

//message为store的模块，messageNum是store模块中的state
computed:{
	...mapGetters({
		messageNum:'message/messageNum'
	})
}

mapGetters是辅助函数，作用是将store中的getter映射到局部计算属性中。
… 为对象展开符，作用是去掉{}

mutation

Vuex 给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation ，且必须是同步函数。
我们在 mutations中定义了一个叫setMessageNum的函数，函数体就是我们要进行更改的地方，会接受 state作为第一个参数，第二个是自定义传参

const mutations ={
	setMessageNum(state,messageNum){
		state.messageNum=messageNum
	}
}

Action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

const actions = {
	setMessageNum({commit}){
		commit('setMessageNum')
	}
}

提交mutation中的setMessageNum

分发 Action
Action 通过 store.dispatch 方法触发：

this.$store.dispatch('memssage/setMessageNum',res.data)

把data存入MessageNum中

Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
随着项目的复杂度增大，为了方便管理 Vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter 甚至是嵌套子模块