Pinia学习笔记

构建日期：2023年1月24日

Pinia版本：^2.0.29

学习资料

1. pinia官网

   https://pinia.vuejs.org/zh/

安装

npm install pinia --save

基本使用

pinia本质上也可以算是一个插件，所以和插件的使用方法是一样的。

import {
    createPinia } from 'pinia'

const store = createPinia()
app.use(store)

Store是什么？

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

应该在什么时候使用Store?

一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。

另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。

并非所有的应用都需要访问全局状态，但如果你的应用确实需要一个全局状态，那 Pinia 将使你的开发过程更轻松。

定义Store

Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字：

import {
    defineStore } from 'pinia'
import {
    ref, computed } from 'vue'

// 选项式写法
const useStore = defineStore('main', {
   
    state: () => {
    return {
   } }, //响应式数据 data
    getters: {
   },     //计算属性 computed
    actions: {
   },     //方法 methods
})

// 组合式写法
const useStore = defineStore('main', () => {
   
    const count = ref(0) //响应式数据 data
    const doubleCount = computed(() => count.value * 2) //计算属性 computed
    const increment = () => {
    //方法 methods
        count.value++
    }
    return {
    count, doubleCount, increment }
})

export default useStore

注意事项：

1. 可以对 defineStore 的返回值进行任意命名，但推荐使用 store 的名字，同时以 use 开头且以 Store 结尾。例如：useUserStore
2. 第一个参数是你的应用中 Store 的唯一ID，这个id是必须传入的。
3. 第二个参数可以接收两类值：Setup 函数(组合式API) 或 Option 对象（选项式API）。

组合式API写法

// stores/counter.js
import {
    defineStore } from 'pinia'
import {
    ref,computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
   
    const count = ref(0)  //state
    const doubleCount = computed(() => count.value * 2) // computed
    function increment() {
    //actions	
        count.value++
    }
    return {
    count, doubleCount, increment }
})

在组合式API中：

• ref() 就是 state 属性
• computed() 就是 getters 计算属性
• function() 就是 actions 方法

在组件模板中使用：

<script setup>
    // 1.引入
    import