Comment introduire et utiliser le référentiel Pinia dans Vue3-Voir.js-php.cn

Comment introduire et utiliser le référentiel Pinia dans Vue3

WBOY

Libérer： 2023-05-14 19:13:04

avant

1827 Les gens l'ont consulté

1. Installez de votre manière préférée

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

Copier après la connexion

2.Introduisez main.js

import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
 
const app=createApp(App)
import { createPinia } from &#39;pinia&#39; //引入pinia
app.use(createPinia())
 
app.mount(&#39;#app&#39;)

Copier après la connexion

3 Créez un fichier de magasin et configurez le fichier index.js interne

import { defineStore } from &#39;pinia&#39; //引入pinia
 
//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useCar=defineStore("test",{ 
    state: () =>{
        return  ({
            msg:"这是pinia",
            name:"小小",
            age:18
            }) //为了避免出错，返回的值用()包起来
    } 
})

Copier après la connexion

4 Comment utiliser les composants

<template>
    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
    <button @click="modify">修改store.name</button>
</template>
 
<script>
import { defineComponent, ref } from &#39;vue&#39;;
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        modify(){
             store.name = state.testMsg //修改pinia里面的数据
             console.log(store.name)
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

Copier après la connexion

5. .$reset()

<template>
    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
    <button @click="reset">重置store.name</button>
</template>
 
<script>
import { defineComponent, ref } from &#39;vue&#39;;
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        reset(){
             store.$reset() //重置pinia里面的数据
             console.log(store.name)
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

Copier après la connexion

6. Magasin de modifications de groupe.$patch peut modifier les données de pinia en même temps

Caractéristiques : modification par lots mais le statut n'est actualisé qu'une seule fois

<template>
    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
    <button @click="modify">修改store.name</button>
    <button @click="reset">重置store.name</button>
    <button @click="allModify">群体修改store.name</button>
</template>
 
<script>
import { defineComponent, ref } from &#39;vue&#39;;
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        modify(){
             store.name = state.testMsg //修改pinia里面的数据
             console.log(store.name)
        },
        reset(){
             store.$reset() //重置pinia里面的数据
             console.log(store.name)
        },
        allModify(){
             store.$patch({
              name:"花花",
              age:20,
            })
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

Copier après la connexion

7. Getter

Getter est tout à fait équivalent à la valeur calculée de l'état du Store. Ils peuvent être définis à l'aide de l'attribut getters dans finishStore(). Ils reçoivent « état » comme premier paramètre pour encourager l'utilisation des fonctions fléchées : (ps : bien que cela soit encouragé, il fournit toujours des méthodes d'utilisation pour les joueurs non-es6. En interne, cela peut être utilisé pour représenter l'état)

//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次
store.$subscribe((mutation, state) => { 
  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem(&#39;hello&#39;, JSON.stringify(state))
})

Copier après la connexion

9 . Les actions

dans pinia Mutaion ne sont pas fournies car les actions suffisent (elles peuvent modifier uniformément le statut de manière asynchrone et synchrone. La raison pour laquelle cette fonction est fournie est d'unifier l'activité du statut de modification publique dans le projet

//store/index.js文件
export const useStore = defineStore(&#39;main&#39;, {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})
 
//组件中直接使用:  <p>Double count is {{ store.doubleCount }}</p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!