前端-Vue3-状态管理库Pinia

Pinia官网

1.状态管理库是什么？

Store是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。
换句话说，它承载着全局的状态。它有地像一个永远存在的组件，每个组件都可以读取何写入它。
它有三个概念，state、getter和action，我们可以假设这些概念相当于组件中的data、computed和methods。

2.什么时候应该使用状态管理库？

一个Store 应该包含可以在这个应用中访问的数据。这包括在许多地方使用的数据，例如在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常负载的多步骤表单。
另一方面，你应该避免在Store中引入那些原本可以在组建中保存的本地数据，例如，一个元素在页面中的可见性。

3.Pinia 是Vue的专属的最新状态管理库，是Vuex 状态管理的一个替代品

【Pinia官网】

4.Pinia的优点是什么？

1. 提供更加简单的API
2. 提供符合组合式风格的API
3. 去掉了modules的概念
4. 搭配TypeScript 一起使用提供可靠的类型推断

5.如何在Vue3中使用Pinia?

1. 项目中安装pinia

npm install pinia

2. 创建一个pinia实例并将其传递给应用

const pinia: Pinia = createPinia()
app.use(pinia)

3. 定义一个Store

import {defineStore} from "pinia";
import {ref} from "vue";

export const useCountStore = defineStore('counter', () => {
    // 数据（data）
    const count = ref(0)

    // 修改数据的方法（action）
    const increment = () => {
        count.value++
    }
    
    // 以对象形式返回
    return {count, increment}
})

4. 任意一个组件中使用定义好的Store (useCountStore)

<template>
    <div class="a-main">
        <h1>这是子组件</h1>
        <el-button @click="incrementCount">增加Store中的count</el-button>
    </div>
</template>

<script setup lang="ts">
import {useCountStore} from "../stores/count.ts";

const incrementCount = () => {
    const countStore = useCountStore()
    countStore.increment()
}
</script>

<style lang="less">
.a-main {
  width: 200px;
  height: 500px;
  border: 1px solid red;
}

</style>

5. 如果响应丢失，视图不在更新
   解构赋值后将失去响应，需要使用storeToRefs重新编程响应式的