Empezando con pinia en la serie vue3+ts

1. Instalar pinia

npm i pinia
或
yarn add pinia
复制代码

2. Introducir pinia

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
 
// 引入pinia并实例化
import { createPinia } from 'pinia'
const pinia = createPinia()
 
createApp(App).use(pinia).mount('#app')
 
复制代码

3. Crea piñas

// 1.在src目录下创建 store 文件
// 2.新增 counter.ts 测试仓库,代码如下
 
// counter.ts
import { defineStore } from "pinia";
import { computed, ref } from 'vue'
// defineStore 接受两个参数
//  参数1：仓库的id（字符串）
//  参数2：options（对象）
export const useCounterStore = defineStore('counter', () => {
    // 定义数据
    const counter = ref(100)
    
    // 定义计算属性
    const counterComputer = computed(() => {
        return counter.value * 2
    })
    
    // 定义方法
    const add = () => {
        counter.value++
    }
    return {
        counter,
        add,
        counterComputer
    }
})
复制代码

4. Usar en archivos vue

<template>
  <div>
    <h1>数量：{
   
   { store.counter }}</h1>
    <h2>计算属性：{
   
   { store.counterComputer }}</h2>
    <button @click="store.add">点我加加</button>
    <hr>
    <h1>数量：{
   
   { counter }}</h1>
    <h2>计算属性：{
   
   { counterComputer }}</h2>
    <button @click="add">点我加加</button>
  </div>
</template>
 
<script setup lang="ts">
import { useCounterStore } from './store/counter'
import { storeToRefs } from 'pinia';
// 普通用法
const store = useCounterStore()
// 解构用法
//  注意：方法可以直接解构使用，但ref、计算属性等直接解构使用，会失去响应式
//  若要解构ref、计算属性，需结合pinia提供的 storeToRefs 方法进行使用
const { add } = store
const { counter, counterComputer } = storeToRefs(store)
 
</script>
 
<style scoped>
 
</style>
复制代码

5. Persistencia de datos de Pinia

1. Instalar complemento

   npm i pinia-plugin-persistedstate
   或
   yarn add pinia-plugin-persistedstate
   复制代码

2. Introducir complementos

   // main.ts
   import { createApp } from 'vue'
   import App from './App.vue'
    
   // 引入pinia
   import { createPinia } from 'pinia'
   // 引入持久化插件
   import persist from 'pinia-plugin-persistedstate'
   // 实例化pinia
   const pinia = createPinia()
    
   createApp(App)
       .use(pinia.use(persist)) // 注册插件
       .mount('#app')
   复制代码

3. Habilite la configuración persist:true en el archivo de tienda que necesita habilitar la persistencia de datos.

   // counter.ts
   import { defineStore } from "pinia";
   import { computed, ref } from 'vue'
   // defineStore第三个参数中启用持久化配置
   //  当启用持久化后，pinia数据发生改变时，会自动将数据存到localStorage中
   //  当页面刷新后，会自动读取localStorage
   export const useCounterStore = defineStore('counter', () => {
       const counter = ref(100)
    
       const add = () => {
           counter.value++
       }
       const counterComputer = computed(() => {
           return counter.value * 2
       })
       return {
           counter,
           add,
           counterComputer
       }
   }, {
       persist: true // 开启pinia数据持久化
   })
   复制代码

6. Resumen
Los datos definidos en pinia (como ref) se pueden comparar con el estado en vuex, las
propiedades calculadas definidas en pinia se pueden comparar con los captadores en vuex,
los métodos definidos en pinia se pueden comparar con mutaciones y acciones en vuex, la diferencia existe no hay distinción entre sincrónico y asincrónico en pinia;
no existe el concepto de modularidad en pinia, y cada archivo ts es un almacén global, que es diferente de un solo almacén en vuex;
en comparación con las diversas API engorrosas de vuex, pinia es más fácil usar