Vue 3.0 状态管理

简介: Vue 3.0 状态管理

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:vue.js

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

简单状态管理起步使用


经常被忽略的是,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')

结束语


要的是,注意你不应该在 action 中替换原始的状态对象——组件和 store 需要引用同一个共享对象,变更才能够被观察到。


接着我们继续延伸约定,组件不允许直接变更属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变,我们最终达成了 Flux 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 变更,同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
相关文章
|
1天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
10 0
|
1天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
8 0
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
7 1
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
5 0
|
1天前
|
JavaScript 前端开发 API
Vue3 系列:从0开始学习vue3.0
Vue3 系列:从0开始学习vue3.0
8 1
|
1天前
|
网络架构
Vue3 系列:vue-router
Vue3 系列:vue-router
6 2
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
7 1