这里写目录标题
Vuex介绍:
参考官网:https://vuex.vuejs.org/zh/guide/
vuex是一种状态管理模式,集中管理所有组件的(共享)状态
Vuex的核心是store(仓库),store是一个容器,包含应用中大部分的状态。
与全局对象的不同之处在于:
1、vuex的状态存储是响应式的,store中的状态发生变化,相应的组件也会立即更新;
2、不能直接改变store中的状态,改变的唯一途径是显示的提交(commit)mutation
核心概念
包括state, getter, mutations, actions
State
如何获取vuex状态:
由于Vuex的状态是响应式的,使用计算属性返回某个状态
store选项存在的原因:
因为store提供了将状态从根组件“注入”到每个子组件中(需调用 Vue.use(Vuex)),不需要某个组件频繁导入,如下图1
通过在根实例注册 store 选项,该store实例会注入到根组件下的所有子组
件,子组件能通过 this.$store访问到 ,如下图2
mapState辅助函数
展开运算符:http://www.seozhijia.net/vue/186.html
当一个组件需要获取多个状态时,可以使用mapState辅助函数帮助生成计算属性
参考:https://vuex.vuejs.org/zh/guide/state.html
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练,当计算属性和state的子节点名称不相同可以使用下面的
count1: state => state.count,
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
当计算属性的名称与state的子节点名称相同时,直接给mapstate传一个字符串数组
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
Getter
特性:
多个组件共享一个函数时,可以用store的计算属性getters
mapGetter辅助函数可以映射到局部计算属性
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)
}
}
})
1、getter的返回值会根据他的依赖缓存起来,且只有当他的依赖值发生了改变才会被重新计算
2、Getter接受state作为其第一个参数
3、Getter可以以属性的形式访问getter里的值store.getters.dongTodos
Mutations
- mutation是更改vuex的store中的状态的唯一方法,类似与事件,调用时用
store.commit('increment')
- mutation不能直接调用,只能由action触发
- mutation必须是同步函数,如果混合异步时,回调函数中进行的状态改变不可追踪,程序难以调试
- 一般用常量替代mutation事件
Actions
- action提交mutation,而不是直接变更状态
- action可以包含任意的异步操作,异步包括(定时器函数,Promise)
- 组件中如何分发action:
1、mapActions 辅助函数映射
2、this.$store.dispatch(‘XXX’)
疑问
1、actions与mutations有啥不一样?为什么这样设计?
- 只有mutations可以更改状态state,actions不能直接更改状态,它只是提交mutations
- mutation必须是同步函数,如果混合异步时,回调函数中进行的状态改变不可追踪,程序难以调试
- action可以包含任意的异步操作,异步包括(定时器函数,Promise)