Vuex-使用方法

Vuex

全局数据管理/全局状态管理

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

简而言之，Vuex是一个全局数据管理工具，通过集中管理模式管理组件的状态，开发者可以通过一些Vue提供的方法来操作组件的状态

Vuex.store使用方法：

const store = new Vuex.store({
State - data（单一状态树）

// Vuex它作为一个“唯一数据源 (SSOT)”而存在
// 每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
state: {
	count: 0,
},

mutation - method（必须同步）

// 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
// Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
mutation: {
	increment(state, n){
		state.count += n
	}
}
// 你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”
// 要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：
store.commit('increment') 
// 你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
store.commit('increment', 10) // 10对应参数n
// 在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：
store.commit // 没有返回值，需要主动获取

getter - computed（store的计算属性）

// 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来。
// 且只有当它的依赖值发生了改变才会被重新计算
get tags(){
	return this.$store.state.tagList
}

action - 调用method（必须异步）

)}

Vuex官方文档

API学习参考

store 怎么模块化

1. 将记录数据和直接操作数据的组件分开
2. 用户操作的组件调用直接操作数据的组件，而不是直接操作数据，只做调用操作，不对数据进行直接操作。
3. 数据与操作的分割开就是模块化。