Vue的状态管理是一种模式,它可以帮助我们更好地管理应用中的数据和状态。它可以让我们更容易地处理复杂的应用,并且可以跨多个组件共享数据和状态。
Vuex是一个专门用于Vue.js应用的集中式状态管理架构。它采用集中式存储来存储应用的所有组件的状态,并以相应的规则保证这些状态以一致的方式进行修改。
Vuex使得我们能够将数据和行为封装到单独的store对象中,而不是将它们分散在各个不同的文件和/或对象中。这样,我们就可以通过一个单一的store对象来跟踪所有应用中发生的事情,而不必去关注如何将数据传递到各个不同的部分。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 存储共享数据 类似data()函数里面data里面存储数据 在vuex里面state存储共享数据 所有需要共享的都要写在state里面 比如token 登录信息 等信息都要写在state里面 这样才能保证所有需要共享信息都能正常使用 否则就会出问题 或者无法正常使用 或者无法正常显示 等问题 count: 0, // 这是一个例子 具体根据你想要存储哪些信息来决定 }, mutations: { // 这里存储方法 类似methods函数里面methods方法 在vuex里面mutations存傲方法 所有要修改state里面共享数据都要写在mutations里面 比如token 登录信息 等信心都要写在mutations里面 这样才能正常使用 increment (state) { // 这是一个例子 具体根据你想要怎么去修改state里面共享数据来决定 state.count++ } } })
由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools,无需配置即可进行时光旅行调试 (time travel debugging)。
如果你是来自 React 的开发者,你可能会对 Vuex 和 Redux 间的差异表示关注,Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层,所以它能够轻松的通过一些[简单绑定_blank_nofollow](https://classic.yarnpkg.com/en/packages?q=redux vue&p=1)和 Vue 一起使用。Vuex 区别在于它是一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合,同时提供简洁的 API 和改善过的开发体验。
经常被忽略的是,Vue 应用中响应式 data
对象的实际来源——当访问数据对象时,一个组件实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,你可以使用一个 reactive 方法让对象作为响应式对象。
const sourceOfTruth = Vue.reactive({
message: "Hello"
})
const appA = Vue.createApp({
data() {
return sourceOfTruth
}
}).mount("#app-a")
const appB = Vue.createApp({
data() {
return sourceOfTruth
}
}).mount("#app-b")
<div id="app-a">App A: {{ message }}</div>
<div id="app-b">App B: {{ message }}</div>
现在当 sourceOfTruth
发生变更,appA
和 appB
都将自动地更新它们的视图。我们现在只有一个真实来源,但调试将是一场噩梦。我们应用的任何部分都可以随时更改任何数据,而不会留下变更过的记录。
const appB = Vue.createApp({
data() {
return sourceOfTruth
},
mounted() {
sourceOfTruth.message = "Goodbye" // both apps will render "Goodbye" message now
}
}).mount("#app-b")
为了解决这个问题,我们采用一个简单的 store 模式:
const store = {
debug: true,
state: Vue.reactive({
message: "Hello!"
}),
setMessageAction(newValue) {
if (this.debug) {
console.log("setMessageAction triggered with", newValue)
}
this.state.message = newValue
},
clearMessageAction() {
if (this.debug) {
console.log("clearMessageAction triggered")
}
this.state.message = ""
}
}
需要注意,所有 store 中 state 的变更,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。
此外,每个实例/组件仍然可以拥有和管理自己的私有状态:
<div id="app-a">{{sharedState.message}}</div>
<div id="app-b">{{sharedState.message}}</div>
const appA = Vue.createApp({
data() {
return {
privateState: {},
sharedState: store.state
}
},
mounted() {
store.setMessageAction("Goodbye!")
}
}).mount("#app-a")
const appB = Vue.createApp({
data() {
return {
privateState: {},
sharedState: store.state
}
}
}).mount("#app-b")
TIP
重要的是,注意你不应该在 action 中替换原始的状态对象——组件和 store 需要引用同一个共享对象,变更才能够被观察到。
接着我们继续延伸约定,组件不允许直接变更属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变,我们最终达成了 Flux 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 变更,同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具。
说了一圈其实又回到了 Vuex,如果你已经读到这儿,或许可以去尝试一下!
#表单当创建一个表单,你可能使用到以下几个元素:form、label、input、textarea 和 button。标签通常放置在表单字段的顶部或左...
万维网联盟 (W3C) 网络可访问性倡议 (WAI) 为不同的组件制定了 Web 可访问性标准:用户代理无障碍指南 (UAAG)网络浏览器和媒体播...
INFO刚接触 Vue.js?先从基础指南开始吧。本指南主要是为有 Vue 2 经验的用户希望了解 Vue 3 的新功能和更改而提供的。在试用 Vu...
在 Vue 2 中,在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时,这种行为会变...
信息这是一个低级的内部 API 更改,不会影响大多数开发人员。#概览下面是对这些变化的高层次总结:删除枚举 attribute 的内部概...