# vuex 状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

提示

当前专题讲述在dnvue中vuex基本使用方式,更多详细的使用方式详见Vuex 官方文档

# 目录结构

在dnvue-ui中已内置vuex状态管理,在 .dnvue/vuex 目录下,使用模块(module)形式。
Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

  • 应用层级的状态应该集中到单个 store 对象中。
  • 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
  • 异步逻辑都应该封装到 action 里面。
  • dnvue-ui下的vuex状态管理经过处理,实现自动注册,注册名称即为js文件名称
┌─vuex              # vuex 目录
└─├─modules         # store模块目录
  │  └─index        # index项目模块
  │     └─index.js  # index项目模块store的js
  └─vuex.js       # 组装模块并导出 store 的js文件,实现自动注册,无需管理

# index模块下store的state使用方式

在使用模块(module)的方式与单一状态树的方式下是有些差异的。
使用模块(module),取值方式为:this.$store.vuex.state.js文件名.状态对象

index.js

// state
const state = () => ({
	test: "测试vuex状态管理state"
})

页面使用

this.$store.vuex.state.index.test

# index模块下store的mutations使用方式

调用方式为:this.$store.vuex.commit("js文件名/mutations函数名","所需传的值")

index.js

// state
const state = () => ({
	test: "测试vuex状态管理state"
})

// mutations
const mutations = {
	test(state, data) {
		state.test = data;
	}
}

页面使用

this.$store.vuex.commit("index/test","测试vuex状态管理mutations")

# index模块下store的actions使用方式

调用方式为:this.$store.vuex.dispatch("js文件名/actions函数名")

index.js

// state
const state = () => ({
	test: "测试vuex状态管理state"
})

// mutations
const mutations = {
	test(state, data) {
		state.test = "测试vuex状态管理mutations";
	}
}

// actions
const actions = {
	test(context) {
		context.commit('test')
	}
}

页面使用

this.$store.vuex.dispatch("index/test");