手把手教你学vue-4(vuex)
1.首先明白vuex是做什么用的。
管理统一组件状态state。每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
2.如何实现 vuex有几个对象
- state =>mapState
- getters =>mapGetters
- actions =>mapActions
- mutations => mapMutations
- moudle
3.state (注入store)
Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)):
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。
当我们需要时刻跟踪状态值的变化时,可以通过组件的计算机属性来确定,然后使用mapState.方法来映射。
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
4.getters (都是方法)
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
- Getter 接受 state 作为第一个参数
- mapGetters 辅助函数仅仅是将 store 中的 getter
import { mapGetters } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
5. mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,调用方法store.commit('increment')
注意点
使用常量替代 Mutation 事件类型
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
- Mutation 必须是同步函数
mapMutations
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}
6.Action
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
context 不是 store 实例本身
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
actions: {
increment ({ commit }) {
commit('increment')
}
}
mapActions 映射到组件
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
7. Module
概念
Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter.类似redux里面的reducer 针对每个组件对应的state状态做处理
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
- rootState
对于模块内部的 action,局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState。
rootState 可以获取到所有mudule里面的state值
const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % 2 === 1) {
commit('increment')
}
}
}
}
最新文章
- delphi 导出xml文件
- android之旋转的刻度盘
- find命令中参数perm的用法
- vs2013中把解决方案上传到SVN服务器
- 用xsd验证xml
- 关于Layouts的分类
- springboot中的406(Not Acceptable)错误
- CodeForces 701C They Are Everywhere
- 【杂】poj2482 Stars in Your Windows 题面的翻译
- 如何使用bootstrap
- ASP.NET Core MVC – Form Tag Helpers
- 深入理解计算机系统(4.1)------Y86指令集体系结构
- LearnOpenGL学习笔记(三)——VBO,VAO,EBO理解
- Docker run 出现问题如何调试?
- TcxGrid 标题头高度
- iPhone开发中从一个视图跳到另一个视图有三种方法:
- ubuntu MySQL采用apt-get install安装目录
- python dict 构造函数性能比较
- 为eclipse安装python、shell开发环境和SVN插件
- java环境和Tomcat环境