自己做网站推广需要多少钱,wordpress购物网站手机,建立网站需要多少钱一个,google网站管理员中心目录
Vuex 是什么
什么是“状态管理模式”#xff1f;
什么情况下我应该使用 Vuex#xff1f;
使用方法#xff1a;
提交载荷#xff08;Payload#xff09;
对象风格的提交方式
使用常量替代 Mutation 事件类型
Mutation 必须是同步函数
在组件中提交 Mutation …目录
Vuex 是什么
什么是“状态管理模式”
什么情况下我应该使用 Vuex
使用方法
提交载荷Payload
对象风格的提交方式
使用常量替代 Mutation 事件类型
Mutation 必须是同步函数
在组件中提交 Mutation
下一步Action Vuex 是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。
什么是“状态管理模式”
让我们从一个简单的 Vue 计数应用开始
const Counter {// 状态data () {return {count: 0}},// 视图template: div{{ count }}/div,// 操作methods: {increment () {this.count}}
}createApp(Counter).mount(#app)
这个状态自管理应用包含以下几个部分
状态驱动应用的数据源视图以声明方式将状态映射到视图操作响应在视图上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意 但是当我们的应用遇到多个组件共享状态时单向数据流的简洁性很容易被破坏
多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。
对于问题一传参的方法对于多层嵌套的组件将会非常繁琐并且对于兄弟组件间的状态传递无能为力。对于问题二我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱通常会导致无法维护的代码。
因此我们为什么不把组件的共享状态抽取出来以一个全局单例模式管理呢在这种模式下我们的组件树构成了一个巨大的“视图”不管在树的哪个位置任何组件都能获取状态或者触发行为
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是Vuex 是专门为 Vue.js 设计的状态管理库以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
如果你想交互式地学习 Vuex可以看这个 Scrimba 上的 Vuex 课程它将录屏和代码试验场混合在了一起你可以随时暂停并尝试。 什么情况下我应该使用 Vuex
Vuex 可以帮助我们管理共享状态并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是如果您需要构建一个中大型单页应用您很可能会考虑如何更好地在组件外部管理状态Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是 Flux 架构就像眼镜您自会知道什么时候需要它。 使用方法 //vuex文件
import { createStore } from vuexexport default createStore({state: {fullscreenLoading: false // 全屏加载},getters: {},mutations: {updateFullLoading(state, status){state.fullscreenLoading status}},actions: {},modules: {}
})// 组件
import { useStore } from vuex
export default {setup() {// vuexconst store useStore()// mutaions修改store.commit(updateFullLoading, true)}
}更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方并且它会接受 state 作为第一个参数
const store createStore({state: {count: 1},mutations: {increment (state) {// 变更状态state.count}}
})
你不能直接调用一个 mutation 处理函数。这个选项更像是事件注册“当触发一个类型为 increment 的 mutation 时调用此函数。”要唤醒一个 mutation 处理函数你需要以相应的 type 调用 store.commit 方法
store.commit(increment)
提交载荷Payload
你可以向 store.commit 传入额外的参数即 mutation 的载荷payload
// ...
mutations: {increment (state, n) {state.count n}
}
store.commit(increment, 10)
在大多数情况下载荷应该是一个对象这样可以包含多个字段并且记录的 mutation 会更易读
// ...
mutations: {increment (state, payload) {state.count payload.amount}
}
store.commit(increment, {amount: 10
})
对象风格的提交方式
提交 mutation 的另一种方式是直接使用包含 type 属性的对象
store.commit({type: increment,amount: 10
})
当使用对象风格的提交方式整个对象都作为载荷传给 mutation 函数因此处理函数保持不变
mutations: {increment (state, payload) {state.count payload.amount}
}
使用常量替代 Mutation 事件类型
使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然
// mutation-types.js
export const SOME_MUTATION SOME_MUTATION
// store.js
import { createStore } from vuex
import { SOME_MUTATION } from ./mutation-typesconst store createStore({state: { ... },mutations: {// 我们可以使用 ES2015 风格的计算属性命名功能// 来使用一个常量作为函数名[SOME_MUTATION] (state) {// 修改 state}}
})
用不用常量取决于你——在需要多人协作的大型项目中这会很有帮助。但如果你不喜欢你完全可以不这样做。
Mutation 必须是同步函数
一条重要的原则就是要记住 mutation 必须是同步函数。为什么请参考下面的例子
mutations: {someMutation (state) {api.callAsyncMethod(() {state.count})}
}
现在想象我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录devtools 都需要捕捉到前一状态和后一状态的快照。然而在上面的例子中 mutation 中的异步函数中的回调让这不可能完成因为当 mutation 触发的时候回调函数还没有被调用devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
在组件中提交 Mutation
你可以在组件中使用 this.$store.commit(xxx) 提交 mutation或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用需要在根节点注入 store。
import { mapMutations } from vuexexport 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)})}
}
下一步Action
在 mutation 中混合异步调用会导致你的程序很难调试。例如当你调用了两个包含异步回调的 mutation 来改变状态你怎么知道什么时候回调和哪个先回调呢这就是为什么我们要区分这两个概念。在 Vuex 中mutation 都是同步事务
store.commit(increment)
// 任何由 increment 导致的状态变更都应该在此刻完成。
