Vue 프로젝트에서 Pinia 상태 관리 도구를 어떻게 사용하나요? 다음 기사에서는 Vue 프로젝트에서 Pinia 상태 관리 도구를 사용하는 방법에 대해 설명하겠습니다. 도움이 되기를 바랍니다.
Pinia의 공식 웹사이트에는 다음과 같이 나와 있습니다. Pinia는 구성 요소/페이지 전체에서 상태를 공유할 수 있는 Vue용 저장소입니다. Vuex는 상태 관리 도구로도 사용할 수 있는데 둘 사이의 차이점은 무엇인가요?
defineStore( )
메소드의 첫 번째 매개변수: 컨테이너 이름, 이름은 고유해야 하며 반복할 수 없습니다defineStore( )
方法的第一个参数:容器的名字,名字必须唯一,不能重复defineStore( )
方法的第二个参数:配置对象,放置state,getters,actionsstate
属性: 用来存储全局的状态getters
属性: 用来监视或者说是计算状态的变化的,有缓存的功能actions
属性: 修改state全局状态数据,可以是异步也可以是同步Pinia
可以用于vue2.x也可以用于vue3.x中
yarn add pinia -S
main.js
引入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
组件,引入store模块和storeToRefs
方法storeToRefs
:解构store
中的数据,使之成为响应式数据<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>
直接修改数据与使用$path
修改数据相比,官方已经明确表示$patch
的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据,推荐使用$patch
方式更新。
虽然可以直接修改,但是出于代码结构来说, 全局的状态管理还是不要直接在各个组件处随意修改状态,应放于actions
中统一方法修改(piain没有mutation)。
//直接修改数据 tchangeName(){ tname.value = "测试数据"; tnum.value++; } //当然也可以使用`$path`批量修改 tchangeName(){ testStore.$path(state=>{ state.tname = "测试数据"; state.value = 7; }) }
直接调用actions
中的方法,可传参数
const actionsBtn = (){ testStore.addNum(5) }
store
中有$reset
方法,可以直接对store
中数据重置
const treset = (){ testStore.$reset() }
yarn add pinia-plugin-persist
store
文件夹下的<code>index.js文件,引入pinia-plugin-presist
插件import {createPinia} from "pinia" import piniaPluginPresist from "pinia-plugin-presist" const store = createPinia(); store.use(piniaPluginPresist) export default store
presist
属性进行配置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
,开启持久化存储,默认为使用sessionStorage
存储 strategies
,进行更多配置 key
,不设置key时,storage的key为definePinia
的第一个属性,设置key值,则自定义storage的属性名 storage:localStorage
,设置缓存模式为本地存储paths
,不设置时对state
中的所用数据进行持久化存执,设置时只针对设置的属性进行持久化存储模块化实现即在store对要使用的模块新建一个js文件,比如user.js
文件。然后配置内容跟其他模块一样,根据自己需求进行设置,然后在对应页面引入。
比如:test.js
获取user.js
中state
的name
属性值,在test.js
引入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
中
import { defineStore } from 'pinia' export const useStore = defineStore('storeId', { state: () => { return { num: 0, name: '张三' } } })
A.vue
组件中,调用test.js
中getUserData
方法就可以得到uesr.js
中的name
defineStore( )
메서드의 두 번째 매개변수: 객체 구성, 상태 배치, getter, actions
state
속성: 전역 상태🎜getters
를 저장하는 데 사용됨 > 속성: 모니터링하거나 말하는 데 사용됩니다. 상태 변화를 계산하는 데 사용되며 캐시 기능이 있습니다🎜actions
속성: 상태 전역 상태 데이터를 비동기식 또는 동기식으로 수정합니다🎜Pinia는 vue2.x에서 사용할 수 있습니다. vue3에서도 사용할 수 있습니다. <strong><code>액션 사용 시 화살표 함수 바인딩이 this 외부에 있으므로 화살표 함수를 사용할 수 없습니다. 이는 현재 스토어를 가리킵니다.
🎜🎜🎜간편한 관리를 위해 스토어 폴더 아래에 새 index.js를 생성하세요🎜🎜const actionBtn = () => { testStore.getUserData() };🎜🎜새
A.vue
생성 구성 요소를 추가하고 store 모듈과 storeToRefs
메서드를 소개합니다🎜storeToRefs
: store
의 데이터를 분해하여 반응형 데이터로 만듭니다🎜🎜rrreeerrreee🎜두 가지 방법 데이터 직접 수정 $path
를 사용하여 데이터를 수정하는 것과 비교하여 공식적인 방법 🎜🎜에서는 $patch
방법이 최적화되어 수정 속도가 빨라진다는 점을 분명히 했습니다. 프로그램에 영향을 미칩니다. 성능상의 이점이 큽니다. 따라서 여러 개의 데이터로 상태 데이터를 동시에 업데이트하는 경우 $patch
메소드를 사용하여 업데이트하는 것이 좋습니다. 🎜 직접 수정할 수는 있지만 코드 구조상 전역 상태 관리에서는 각 구성 요소의 상태를 마음대로 직접 수정하면 안 됩니다. actions
에서 통일된 메서드로 수정해야 합니다(piain은 그렇지 않습니다. 돌연변이가 있습니다). 🎜rrreee🎜액션을 사용하여 데이터 수정🎜🎜액션
에서 메소드를 직접 호출하고 매개변수를 전달할 수 있습니다🎜rrreee🎜상태에서 데이터를 재설정🎜🎜에 <code>$가 있습니다. store
재설정 메소드는 store
🎜rrreee🎜Pinia 영구 저장소🎜🎜🎜영구 저장소를 얻으려면 다음 플러그인을 사용해야 합니다🎜 🎜rrreee🎜🎜store 폴더 아래의 <code>index.js
파일에 pinia-plugin-presist
플러그인 🎜🎜rrreee🎜🎜을 도입하세요. Store 폴더 File 아래에 test.js를 구성하고 presist
속성을 사용하여 🎜🎜rrreee🎜🎜enable:true
를 구성하고 영구 저장소를 활성화합니다. 기본값은 sessionStorage
저장 🎜 - 전략, 추가 구성 🎜 - 키
, 키가 설정되지 않은 경우 저장소 키는 definePinia, 키 값 설정, 그런 다음 저장소 🎜🎜 저장소:localStorage
의 속성 이름을 사용자 정의하고, 캐시 모드를 로컬 저장소 🎜🎜경로
로 설정합니다. , 설정되지 않은 경우 state
로 설정합니다. 설정 시 설정된 속성만 유지됩니다. 🎜🎜🎜Pinia 모듈식 구현🎜🎜모듈식 구현은 새 js 파일을 생성하는 것을 의미합니다. user .js
파일과 같이 사용할 모듈의 저장소에 있습니다. 그런 다음 구성 내용은 다른 모듈과 동일하고 필요에 따라 설정한 다음 해당 페이지에 소개됩니다. 🎜🎜🎜피니아 매장 간 각각 전화하세요 other🎜🎜예: test.js
는 user.js
에서 state
의 name
속성 값을 가져옵니다. test.js는 user.js
🎜rrreee🎜user.js의 🎜rrreee🎜<code>A.vue
구성 요소에 도입되었습니다. code>, test.js
에서 getUserData
메서드를 호출하여 uesr.js
🎜에서 name
값을 가져옵니다.const actionBtn = () => { testStore.getUserData() };
(学习视频分享:编程基础视频)
위 내용은 Vue 프로젝트에서 Pinia 상태 관리 도구를 사용하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!