Vuex 方法自学总结

项目地址:https://github.com/Tom-cy/Adminmywork 持续更新，如果有帮助还请给个Star

1： Vuex 目录:{
一： actions.js
二： getters.js
三： mutations.js
四： state.js
五： index.js
}

Vuex 方法自学总结
一: state.js : (---------初始化数据状态------)那么我们如何在 Vue 组件中展示状态呢？由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from ‘vuex’

二: actions.js : 一般用于引入数据文件 , 并且初始化 , Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，并且对象有一个commit 方法，因此你可以调用 context.commit 提交一个 mutation，

三：mutation : Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
使用常量替代 Mutation 事件类型
使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：
// mutation-types.js
export const SOME_MUTATION = ‘SOME_MUTATION’

四：getters :Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。相当于computed,
import { mapGetters } from ‘vuex’
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

Vuex 方法自学总结

相关推荐