🪴qql1's digital garden

状态管理

2分钟阅读

适用范围:

1. 作用:

  • 更好的规范响应式变量的数据流向
    • 更规范地引用响应式变量
    • 更规范地修改响应式变量
  • 方便全局共享

2. 如果没有进行规范地状态管理的情况:

  • 一个全局的响应式变量会被多个组件修改
    • 并且对响应式变量的修改都是组件内部定义的, 不同的组件, 修改方式不同, 难以追溯修改情况

场景

  • 多视图共享状态：顶部导航栏的登陆状态、主题样式、购物车数量等
  • 数据缓存或共享：API请求结果需要进行跨组件读取

梗概:

  • 如果想使用复杂, 系统, 现成的状态管理, 请使用第三方提供的状态管理库
  • 如果项目规模小, 只需要简单的规范一下修改和引用就行了

简单的状态管理

规范的状态管理:

封装成一个对象

采用面向对象的思想:

  • 将状态与修改封装成一个方法
    • 将不同的修改方法都封装起来
  • 把状态与相应的操作暴露到全局域中
  • 组件直接调用这些封装起来的修改方法

示例

实例

好的，让我为你提供一个简单的示例代码，演示如何使用 Pinia 进行状态管理。在这个示例中，我们将创建一个包含计数器的简单应用，展示如何使用 Pinia 来管理计数器的状态。 首先，确保你的项目已经安装了 Vue 3 和 Pinia。你可以通过 npm 或 yarn 来安装它们：

npm install vue@next @pinia/vue@next

或者

yarn add vue@next @pinia/vue@next

接下来，我们将创建一个 Pinia store 来管理计数器的状态。在你的应用中创建一个名为 counterStore.js 的文件，并添加以下代码：

import { defineStore } from 'pinia'
// 定义一个名为 counter 的 store
export const useCounterStore = defineStore('counter', {
  // 在 store 中定义状态和操作
  state: () => ({
    count: 0,
  }),
  actions: {
    // 增加计数器的值
    increment() {
      this.count++
    },
    // 减少计数器的值
    decrement() {
      this.count--
    },
  },
})

现在，我们已经定义了一个简单的 Pinia store，接下来我们将在我们的应用中使用它。在你的 Vue 组件中，可以像这样使用该 store：

<template>
  <div>
    <p>当前计数：{{ counter }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>
<script>
import { useCounterStore } from './counterStore'
export default {
  // 使用 useCounterStore() hook 获取 counter store 实例
  setup() {
    const counterStore = useCounterStore()
    // 从 store 中获取计数器的值和操作
    const counter = counterStore.count
    const increment = counterStore.increment
    const decrement = counterStore.decrement
    return { counter, increment, decrement }
  },
}
</script>

在这个示例中，我们首先导入了之前定义的 useCounterStore hook，然后在 setup 函数中使用它来获取 counter store 的实例。接着，我们从 store 实例中获取了计数器的值和操作，并将它们绑定到模板中。 这样，我们就完成了一个简单的使用 Pinia 进行状态管理的示例。通过这个示例，你可以看到如何定义和使用 Pinia store，并在组件中管理应用程序的状态。

指向原始笔记的链接

关系图谱

反向链接