Inicio rápido de Pinia para Vue3

Tabla de contenido

Prefacio:

1. ¿Qué es la pinia?

2. Ventajas de Pinia

3. Instalar Pinia

4. El uso básico y el concepto de pinia.

4.1 Preparaciones

4.2tienda

4.3 Agregar estado

4.4 Uso de la tienda

4.5 Modificar datos

4.6 Restablecer datos

5. atributo de captadores

6. Propiedad de acciones

7. Todos los códigos

Resumir:

---

Prefacio:

Pinia es la biblioteca de administración de estado exclusiva de Vue, que le permite compartir el estado entre componentes o páginas, similar a Vuex, es otra solución de administración de estado para Vue y es compatible con Vue2 y Vue3.

1. ¿Qué es la pinia?

Todos sabemos que Vuex desempeña principalmente el papel de administración de estado en Vue2. La llamada administración de estado es simplemente un lugar para almacenar datos. Se puede acceder a los datos almacenados en Vuex mediante varios componentes. Es una parte importante de la ecología de Vue. componente

En Vue3, puede usar Vuex tradicional para implementar la gestión de estado, o puede usar el último pinia para implementar la gestión de estado.

2. Ventajas de Pinia

1. Tanto Vue2 como Vue3 son compatibles
2. La acción en pinia admite síncrono y asíncrono, pero Vuex no lo admite
3. Buen soporte de mecanografiado
4. El volumen es muy pequeño, solo alrededor de 1 KB
5. pinia admite complementos para ampliar sus propias funciones
6. Solo hay estado, captador y acción en pinia, y se abandona la mutación en Vuex

3. Instalar Pinia

# 使用 npm
npm install pinia
# 使用 yarn
yarn add pinia

4. El uso básico y el concepto de pinia.

4.1 Preparaciones

Modifique main.js, importe el método createPinia proporcionado por pinia y cree almacenamiento raíz.

// main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//引入pinia中的createPinia方法
import {createPinia} from "pinia"
//创建根储存
const pinia  = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app')

4.2tienda

Store significa almacén de datos.Nuestros datos se almacenan en la tienda y se pueden leer y escribir.

//src/store/goods.js
//引入函数
import { defineStore } from "pinia";
// 调用defineStore函数创建Store 实体
export const goodsStore = defineStore('users', {
    
  })

La función defineStore que crea una entidad de tienda tiene dos valores de parámetro

• nombre: cadena, artículo obligatorio, identificación única de la tienda.
• opciones: objeto, elementos de configuración de la tienda, como estado, etc.

4.3 Agregar estado

Los datos que necesitamos almacenar se colocan en el atributo de estado.

//src/store/goods.js

import { defineStore } from "pinia";
export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"]
        }
    },
  })

4.4 Uso de la tienda

En este momento, el estado del elemento de configuración en nuestra tienda tiene datos y podemos usarlo

//App.vue
<script setup>
 import {goodsStore} from "./store/store";
 const store = goodsStore()
 console.log(store)
</script>

Imprime los datos de las mercancías que acabamos de tener.

Al importar datos, introduzca la función storeToRefs en pinia para que la capacidad de respuesta no se pierda al modificar

<script setup>
 import {goodsStore} from "./store/store";
 import { reactive } from "vue";
 import {storeToRefs} from 'pinia'
 const store = goodsStore()
const {goods} = storeToRefs(store)
 

</script>

<template>
  <div>
    <ul>
      <li v-for="(item,index) in goods" :key="index">
         {
   
   { item }}
      </li>
    </ul>
  </div>
</template>

Resultado: En este momento se obtienen los datos en el almacén de la tienda

4.5 Modificar datos

Modificar un solo dato

 const  updataGoods=()=>{
  store.goods[0] = "西瓜"
 }

$patch: modificar varias líneas de datos

const path = ()=>{
  store.$patch({
    goods:["西瓜","兰花"]
  })
}

 $estado: modificar y reemplazar si hay datos, aumentar si no hay datos

const stata = ()=>{
  store.$state = {
    name:"wjd",
    age:"289"
  }
}

4.6 Restablecer datos

Cuando hayamos modificado los datos y necesitemos volver a los datos originales, podemos usar el método $reset() en este momento

 const reset = () => {
  store.$reset();
}

5. atributo de captadores

Un captador es equivalente a una propiedad calculada en Vue, y su función es devolver un nuevo resultado

//src/store/goods.js
export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"],
            list : ["手机","电脑"]
        }
    },
    getters:{
        getGoods(state){
            return state.goods[0] + state.list[0]
        }
    }
  })

Usar captadores en la página

//app.vue
<template>
  <div>
    <ul>
      <li v-for="(item,index) in goods" :key="index">
         {
   
   { item }}
      </li>
      //使用使用这样的方式
      {
   
   { store.getGoods }}
    </ul>
  </div>
</template>

captadores que pasan parámetros

//src/store/goods.js
export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"],
            list : ["手机","电脑"]
        }
    },
    getters:{
        getGoods(state){
            return state.goods[0] + state.list[0]
        },
        //返回一个函数在调用的时候直接传递参数
        getass(state){
            return (num)=>{
                return num + state.goods[0]
            }
        }
    }
  })
//app.js 中调用
{
   
   { store.getass("1：") }}

6. Propiedad de acciones

La acción es equivalente al método en el componente, que se utiliza para colocar algunos métodos para procesar la lógica comercial.Si tenemos código comercial, lo mejor es escribirlo en Acciones.

export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"],
            list : ["手机","电脑"]
        }
    },
    getters:{
        getGoods(state){
            return state.goods[0] + state.list[0]
        },
        getass(state){
            return (num)=>{
                return num + state.goods[0]
            }
        }
    },
    actions:{
        setList(){
              //通过this.xx 访问相应状态
            this.list = [
                "麻将",
                "扑克"
            ]
        }
    }
  })

usar en la pagina

//app.vue
<script setup>
 import {goodsStore} from "./store/store";
 import { reactive } from "vue";
 import {storeToRefs} from 'pinia'
 const store = goodsStore()
 const {goods} = storeToRefs(store)
 store.setList()
</script>

7. Todos los códigos

//main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import {createPinia} from "pinia"
const pinia  = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app')

// src/store/store.js

import { defineStore } from "pinia";
// 调用defineStore函数创建Store 实体
export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"],
            list : ["手机","电脑"]
        }
    },
    getters:{
        getGoods(state){
            return state.goods[0] + state.list[0]
        },
        getass(state){
            return (num)=>{
                return num + state.goods[0]
            }
        }
    },
    actions:{
        setList(){
            this.list = [
                "麻将",
                "扑克"
            ]
        }
    }
  })

//app.vue

<script setup>
 import {goodsStore} from "./store/store";
 import { reactive } from "vue";
 import {storeToRefs} from 'pinia'
 const store = goodsStore()
const {goods} = storeToRefs(store)
 const  updataGoods=()=>{
  store.goods[0] = "西瓜"
 }
 const reset = () => {
  store.$reset();
}
const path = ()=>{
  store.$patch({
    goods:["西瓜","兰花"]
  })
}
const stata = ()=>{
  store.$state = {
    name:"wjd",
    age:"289"
  }
}
store.setList()
</script>

<template>
  <div>
    <ul>
      <li v-for="(item,index) in goods" :key="index">
         {
   
   { item }}
      </li>
      <button @click="updataGoods">修改</button>
      <button @click="reset">重置</button>
      <button @click="path">批量</button>
      <button @click="stata">覆盖修改</button>
      {
   
   { store.getass("1：") }}
    </ul>
  </div>
</template>
<style scoped>
div{
  width: 100vw;
  height: 100%;
}
li{
  list-style: none;
}
</style>

Resumir:

En comparación con Vuex, Pinia tiene menos puntos de conocimiento y más simples, y Pinia se puede expandir libremente y es más conveniente de usar.