Analisis ringkas tentang cara menggunakan alat pengurusan negeri Pinia dalam projek Vue

Bagaimana untuk menggunakan alat pengurusan negeri Pinia dalam projek Vue? Artikel berikut akan bercakap dengan anda tentang penggunaan alat pengurusan negeri Pinia dalam projek Vue, saya harap ia akan membantu anda!

Laman web rasmi Pinia berkata: Pinia ialah repositori untuk Vue yang membolehkan anda berkongsi keadaan merentas komponen/halaman. Vuex juga boleh digunakan sebagai alat pengurusan negeri, jadi apakah perbezaan antara keduanya?

Perbezaan antara Pinia dan Vuex

• Pinia hanya mempunyai stor, getter, tindakan dan tiada mutasi, yang memudahkan operasi pengurusan negeri. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]
• bahagian modul pinia tidak memerlukan modul,
• pemisahan kod automatik pinia
• pinia mempunyai sokongan yang baik untuk ts dan API komposisi vue3
• pinia lebih kecil dan mempunyai prestasi yang lebih baik

Gunakan Pinia

defineStore( ) Parameter pertama kaedah: nama bekas, nama mestilah unik dan tidak boleh diulang
defineStore( ) Parameter kedua kaedah: konfigurasikan objek, keadaan tempat, getter, tindakan
state Atribut: Gunakan Untuk menyimpan keadaan global
getters Atribut: Digunakan untuk memantau atau mengira perubahan keadaan, dengan fungsi caching
actions Atribut: Ubah suai keadaan data keadaan global, yang boleh tak segerak atau segerak
Pinia boleh digunakan dalam vue2.x atau vue3.x

• Pemasangan

yarn add pinia -S

• main.jsPerkenalkan

import {createApp} from "vue"
import App from "./app.vue"
import store from "./store/index.js"
const app = createApp(App);
const store = createPinia();
app.use(store).mount("#app")

• Buat test.js baharu dalam folder kedai

import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
    state:()=>{
         tname:"test",
         tnum:0,
    },
    getters:{
       changeTnum(){
           console.log("getters")
           this.tnum++;
       }
    },
    actions:{
       addNum(val){
          this.tnum += val
       }
    },
    //持久化存储配置
    presist:{
         enable:true,//
         strategies:[
            {
            key:"testId",
            storage:localStorage,
            paths:['tnum']
            } 
         ]
    }
})

在用actions的时候，不能使用箭头函数，因为箭头函数绑定是外部的this。actions里的this指向当前store

• Buat index.js baharu di bawah folder kedai untuk pengurusan mudah

import {createPinia} from "pinia"
const store = createPinia();
export default store

• Buat komponen A.vue baharu dan perkenalkan modul kedai dan storeToRefskaedah
  storeToRefs: Nyahbina data dalam store dan jadikannya data responsif

<template>
    <div>
        <div> {{tname}}</div>
        <div> {{tid}}</div>
        <div> tnum: {{tnum}}</div>
        <div> {{tchangeNum}}</div>
        <div><button @click="tchangeName">修改</button></div>
        <div> <button @click="treset">重置</button></div>
        <div @click="actionsBtn">actionsBtn</div>
    </div>
</template>

<script setup>
import { storeToRefs } from &#39;pinia&#39;
import { useStore } from &#39;../store/user&#39;
import { useTest } from &#39;../store/test.js&#39;
const testStore = useTest();
let { tname, tchangeNum, tnum } = storeToRefs(testStore)
</script>

Dua cara untuk mengubah suai data secara langsung

Secara langsung mengubah suai data dan Berbanding dengan menggunakan $path untuk mengubah suai data, pegawai telah menjelaskan dengan jelas bahawa kaedah $patch dioptimumkan dan akan mempercepatkan pengubahsuaian, yang memberi manfaat besar kepada prestasi program. Jadi, jika anda mengemas kini data status untuk berbilang keping data pada masa yang sama, adalah disyorkan untuk menggunakan kaedah $patch untuk mengemas kini.
Walaupun ia boleh diubah suai secara langsung, disebabkan oleh struktur kod, pengurusan keadaan global tidak seharusnya mengubah suai status setiap komponen secara langsung Ia harus diubah suai dalam kaedah bersatu dalam actions (piain tidak mempunyai mutasi). .

//直接修改数据
tchangeName(){
     tname.value = "测试数据"；
     tnum.value++;
}
//当然也可以使用`$path`批量修改
tchangeName(){
     testStore.$path(state=>{
          state.tname = "测试数据"；
          state.value = 7;
     })
}

Gunakan tindakan untuk mengubah suai data

Panggil kaedah secara langsung dalam actions dan lulus parameter

const actionsBtn = (){
      testStore.addNum(5)  
}

Tetapkan semula data dalam keadaan

store mempunyai kaedah $reset, yang boleh menetapkan semula data secara langsung dalam store

const treset = (){
    testStore.$reset()
}

Storan berterusan Pinia

• memerlukan kerjasama Pemalam berikut gunakan

yarn add  pinia-plugin-persist

• untuk mengkonfigurasi fail store di bawah folder index.js dan memperkenalkan pinia-plugin-presistplug masuk

import {createPinia} from "pinia"
import piniaPluginPresist from "pinia-plugin-presist"
const store = createPinia();
store.use(piniaPluginPresist)
export default store

• Konfigurasikan fail test.js di bawah folder stoe, gunakan atribut presist untuk mengkonfigurasi

import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
    state:()=>{
         tname:"test",
         tnum:0,
    },
    getters:{
       changeTnum(){
           console.log("getters")
           this.tnum++;
       }
    },
    actions:{
       addNum(val){
          this.tnum += val
       }
    },
    //持久化存储配置
    presist:{
         enable:true,//
         strategies:[
            {
            key:"testId",
            storage:localStorage,
            paths:['tnum']
            } 
         ]
    }
})

• enable:true, dayakan storan berterusan dan gunakan sessionStorage storan secara lalai
  - strategies, untuk konfigurasi lanjut
  - key, apabila kunci tidak ditetapkan, kunci storan ialah atribut pertama definePinia Apabila nilai kunci ditetapkan, nama atribut storan diperibadikan
• storage:localStorage, tetapkan mod cache kepada storan setempat
• paths Jika tidak ditetapkan, data yang digunakan dalam state akan dikekalkan , ia hanya akan digunakan untuk atribut yang ditetapkan

Pelaksanaan modular Pinia

Pelaksanaan modular bermakna mencipta fail js baharu dalam stor untuk modul yang akan digunakan, seperti sebagai fail user.js. Kemudian kandungan konfigurasi adalah sama seperti modul lain, ditetapkan mengikut keperluan anda sendiri, dan kemudian diperkenalkan pada halaman yang sepadan.

Kedai di Pinia memanggil satu sama lain

Contohnya: test.js mendapat user.js nilai atribut state dalam name dan memperkenalkannya dalam test.js Dalam komponen user.js

import { defineStore } from 'pinia'
import { userStore } from "./user.js"
export const useTest = defineStore("testId", {
	state: () => {
		return {
			tid: "111",
			tname: "pinia",
			tnum: 0
		}
	},
	getters: {
		tchangeNum() {
			console.log('getters')
			return this.tnum + 100
		}
	},
	actions: {
		tupNum(val) {
			console.log('actions')
			this.tnum += val;
		},
		getUserData() {
			console.log(useStore().name);
			return useStore().name;
		},
	},
	persist: {
		//走的session
		enabled: true,
		strategies: [
			{
				key: "my_testId",
				storage: localStorage,
				paths: ['tnum']
			}
		]
	}
})

user.js, panggil kaedah

dalam

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0,
      name: '张三'
    }
  }
})

untuk mendapatkan >NilaiA.vue

const actionBtn = () => {
    testStore.getUserData()
};

（学习视频分享：编程基础视频）

Atas ialah kandungan terperinci Analisis ringkas tentang cara menggunakan alat pengurusan negeri Pinia dalam projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!