Vue 프로젝트에서 Pinia 상태 관리 도구를 사용하는 방법에 대한 간략한 분석

Vue 프로젝트에서 Pinia 상태 관리 도구를 어떻게 사용하나요? 다음 기사에서는 Vue 프로젝트에서 Pinia 상태 관리 도구를 사용하는 방법에 대해 설명하겠습니다. 도움이 되기를 바랍니다.

Pinia의 공식 웹사이트에는 다음과 같이 나와 있습니다. Pinia는 구성 요소/페이지 전체에서 상태를 공유할 수 있는 Vue용 저장소입니다. Vuex는 상태 관리 도구로도 사용할 수 있는데 둘 사이의 차이점은 무엇인가요?

Pinia와 Vuex의 차이점

• Pinia에는 Store, Getter, Action만 있고 Mutation이 없어 상태 관리 운영이 단순화됩니다. [관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발]
• pinia 모듈 분할에는 모듈이 필요하지 않습니다.
• pinia 자동 코드 분할
• pinia는 ts 및 vue3의 구성 API를 잘 지원합니다
• pinia는 더 큰 크기, 더 나은 성능

Pinia 사용

defineStore( ) 메소드의 첫 번째 매개변수: 컨테이너 이름, 이름은 고유해야 하며 반복할 수 없습니다 defineStore( ) 方法的第一个参数：容器的名字，名字必须唯一，不能重复
defineStore( ) 方法的第二个参数：配置对象，放置state，getters，actions
state 属性： 用来存储全局的状态
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")

• 在store文件夹下新建test.js

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

• 在store文件夹下新建index.js，便于管理

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 &#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>

直接修改数据的两种方式

直接修改数据与使用$path修改数据相比，官方已经明确表示$patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据，推荐使用$patch方式更新。
虽然可以直接修改，但是出于代码结构来说， 全局的状态管理还是不要直接在各个组件处随意修改状态，应放于actions中统一方法修改（piain没有mutation）。

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

使用actions修改数据

直接调用actions中的方法，可传参数

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

重置state中数据

store中有$reset方法，可以直接对store中数据重置

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

Pinia持久化存储

• 实现持久化存储，需要配合以下插件使用

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

• 配置stroe文件夹下的test.js文件，使用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中的所用数据进行持久化存执，设置时只针对设置的属性进行持久化存储

Pinia模块化实现

模块化实现即在store对要使用的模块新建一个js文件，比如user.js文件。然后配置内容跟其他模块一样，根据自己需求进行设置，然后在对应页面引入。

Pinia中store之间互相调用

比如：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中的namedefineStore( ) </code >메서드의 두 번째 매개변수: 객체 구성, 상태 배치, getter, actions</p><code>state 속성: 전역 상태🎜getters</code를 저장하는 데 사용됨 > 속성: 모니터링하거나 말하는 데 사용됩니다. 상태 변화를 계산하는 데 사용되며 캐시 기능이 있습니다🎜<code>actions 속성: 상태 전역 상태 데이터를 비동기식 또는 동기식으로 수정합니다🎜Pinia< /code>는 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 저장 🎜 -< code> 전략, 추가 구성 🎜 - 키, 키가 설정되지 않은 경우 저장소 키는 <의 첫 번째 속성입니다. code>definePinia, 키 값 설정, 그런 다음 저장소 🎜🎜 저장소:localStorage의 속성 이름을 사용자 정의하고, 캐시 모드를 로컬 저장소 🎜🎜경로로 설정합니다. , 설정되지 않은 경우 state로 설정합니다. 설정 시 설정된 속성만 유지됩니다. 🎜🎜🎜Pinia 모듈식 구현🎜🎜모듈식 구현은 새 js 파일을 생성하는 것을 의미합니다. user .js 파일과 같이 사용할 모듈의 저장소에 있습니다. 그런 다음 구성 내용은 다른 모듈과 동일하고 필요에 따라 설정한 다음 해당 페이지에 소개됩니다. 🎜🎜🎜피니아 매장 간 각각 전화하세요 other🎜🎜예: test.js는 user.js에서 state의 name 속성 값을 가져옵니다. < code>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!