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?
defineStore( )
Parameter pertama kaedah: nama bekas, nama mestilah unik dan tidak boleh diulangdefineStore( )
Parameter kedua kaedah: konfigurasikan objek, keadaan tempat, getter, tindakanstate
Atribut: Gunakan Untuk menyimpan keadaan globalgetters
Atribut: Digunakan untuk memantau atau mengira perubahan keadaan, dengan fungsi cachingactions
Atribut: Ubah suai keadaan data keadaan global, yang boleh tak segerak atau segerakPinia
boleh digunakan dalam vue2.x atau vue3.x
yarn add pinia -S
main.js
Perkenalkan 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")
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
import {createPinia} from "pinia" const store = createPinia(); export default store
A.vue
baharu dan perkenalkan modul kedai dan storeToRefs
kaedahstoreToRefs
: 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 'pinia' import { useStore } from '../store/user' import { useTest } from '../store/test.js' const testStore = useTest(); let { tname, tchangeNum, tnum } = storeToRefs(testStore) </script>
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; }) }
Panggil kaedah secara langsung dalam actions
dan lulus parameter
const actionsBtn = (){ testStore.addNum(5) }
store
mempunyai kaedah $reset
, yang boleh menetapkan semula data secara langsung dalam store
const treset = (){ testStore.$reset() }
yarn add pinia-plugin-persist
store
di bawah folder index.js
dan memperkenalkan pinia-plugin-presist
plug masukimport {createPinia} from "pinia" import piniaPluginPresist from "pinia-plugin-presist" const store = createPinia(); store.use(piniaPluginPresist) export default store
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 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.
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
import { defineStore } from 'pinia' export const useStore = defineStore('storeId', { state: () => { return { num: 0, name: '张三' } } })
>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!