Vuex-状态管理模式-核心概念1-state+getters

Vuex-核心概念1—state+getters

state: 单一状态树（单一数据源）
getters: 计算属性
mutations: 唯一改变 state 的地方
actions: 处理异步操作
modules: 模块

---

Vuex-状态管理的目录结构，转战Vuex 状态管理模式-项目结构
Vuex-核心概念2，转战mutations

1、state 单一状态树

• vue 规定只创建一个 store 实例

const srore = new Vuex.Store({ ... })

• 如果创建多个 store ，维护困难

2、getters 使用

• 类似 computed （计算属性），经过一系列计算得到结果
  在 src / index.js 中声明 store 实例对象

const srore = new Vuex.Store({
	...
	getters: {
		update (state) {...}
	}
})

1）组件中使用（直接当成属性使用）

<h2>{{$store.getters.update}}<h2>

2）getters 中的参数

const srore = new Vuex.Store({
	state: {
		count: 100,
		stuArr: [
			{name: 'Tom', age: 16},
			{name: 'Jack', age: 20}
		]
	},
	getters: { 
		updateOne (state) { // 一个参数
			return state.count + '1111'
		},
		updateTwo (state, getters) { 
		// 两个参数，第二个参数不论命名如何，指向的都是当前的 getters
			console.log(getters)
			return getters.updateOne + '2222'
		}
	},
	....
})

• 组件中使用

<h2>{{$store.getters.updateOne}}</h2>
<h2>{{$store.getters.updateTwo}}</h2>

3）如果在组件中使用的时候，根据接收到的参数进行数据响应，可通过返回函数的形式

• 需求，筛选出 age > 18 的数据

<h2>{{$store.getters.moveAge(18)}}</h2>

// state 中的数据同 2）中的数据
getters： {
	moveAge (state) {
		return age => {
			return state.stuArr.filter(res => {
				res.age >= age
			})
		}
		
	}
}

———————————————————
“今天的风又吹向你，所有的酒都不如你 ”