2021-0317-Vuex学习（二）

Vuex核心概念

State

在Vue组件中获得Vuex状态

从store实例中读取状态最简单的方式就是在计算属性中返回某个状态：

// 创建一个Counter组件
const Counter = {
	template: `<div>{{ count }}</div>`,
	computed: {
		count () {
			return store.state.count
		}
	}
}

每当store.state.count变化的时候，都会重新求取计算属性，并且触发更新相关联的DOM。

Vuex通过store选项，提供了一种机制将状态从根组件“注入”到每一个组件中（需要调用Vue.use(Vuex)）：

const app = new Vue({
	el: '#app',
	// 把store对象提供给“store”选项，这样可以把store的实例注入所有的组件
	store,
	component: { Counter },
	tempalte: `
		<div class="app">
			<counter></counter>
		</div>
	`
})

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。以下是Counter子组件的实现：

const Counter = {
	template: `<div>{{ count }}</div>`,
	computed: {
		count () {
			return this.$store.count
		}
	}
}

mapState辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性有些重复和冗杂。为了解决问题，我们可以使用mapState辅助函数帮助我们生成计算属性：

// 在单独构建的版本中辅助函数为Vuex.mapState
import {mapState} from 'vuex'

export default { 
	// ...
	computed: mapState({
		// 箭头函数
		count: state => state.count,
	
		// 传字符串参数'count'等同于'state => state.count'
		countAlias: 'count',

		// 为了能够使用'this'获取局部状态，必须使用常规函数
		countPlusLocalState (state) {
			return state.count + this.localCount
		}
	})
}

对象展开运算符

mapState函数返回的是一个对象。我们如何将它与局部计算属性混合使用？通常，我们需要使用一个工具函数将多个对象合并一个，以使我们可以将最终对象传给computed属性。但自从有了对象展开运算符之后，我们可以极大简化写法：
computed: {
localComputed () {
/* … */
}
// 使用对象展开运算符将此对象混到外部对象中
…mapState({
// …
})
}

Getters

有时候我们需要从state中派生出一些状态，例如对列表进行过滤并计数：

computed: {
	doneTodosCount () {
		return this.$store.state.todos.filter(todo => todo.done).length
	}
}

如果有多个组件需要用到此属性，我们要么复制这个函数，要么抽取到一个共享函数然后在多出导入——无论何种方式都不是很理想。
Vuex允许我们在store中定义“getter”（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter接受state作为其第一个参数：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: ‘…’, done: true },
{ id: 2, text: ‘…’, done: false}
]
},
getters: {
doneTodos: state => {
return state.todos.filter( todo => todo.done)
}
}
})

通过属性访问

Getter会暴露为store.getters对象，你可以以属性的形式访问这些值：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true}]

Getter也可以接受其他getter作为第二个参数：

getters: {
 // ...
 doneTodosCount: (state, getters) => {
 	return getters.doneTodos.length
 }
}
store.getters.doneTodosCount // -> 1