Comment utiliser l'outil de gestion d'état Pinia dans le projet Vue ? L'article suivant parlera de l'utilisation des outils de gestion d'état Pinia dans les projets Vue. J'espère qu'il vous sera utile !
Le site officiel de Pinia dit : Pinia est un référentiel pour Vue qui vous permet de partager l'état entre les composants/pages. Vuex peut également être utilisé comme outil de gestion d'état, alors quelle est la différence entre les deux ? 
defineStore()Le premier paramètre de la méthode : le nom du conteneur, le nom doit être unique et ne peut pas être répété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 storeA.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 storepresist属性进行配置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中的namedefineStore() </code >Le deuxième paramètre de la méthode : configure l'objet, l'état du lieu, les getters, les actions</p>Attribut <code>state : utilisé pour stocker l'état global🎜getters</code > attribut : utilisé pour surveiller ou dire Il est utilisé pour calculer les changements d'état et a une fonction de cache🎜<code>actions attribut : Modifier les données d'état globales, qui peuvent être asynchrones ou synchrones🎜Pinia< /code> peut être utilisé pour vue2.x Il peut également être utilisé dans vue3 <strong><code>Lors de l'utilisation d'actions, les fonctions fléchées ne peuvent pas être utilisées car la liaison de la fonction flèche est externe à celle-ci. Ceci en actions pointe vers le magasin actuel🎜🎜🎜Créez un nouvel index.js sous le dossier du magasin pour une gestion facile🎜🎜
const actionBtn = () => {
testStore.getUserData()
};A.vue composant et introduisez le module de magasin et la méthode storeToRefs🎜storeToRefs : déconstruisez les données dans store et rendez-les réactives🎜🎜rrreeerrreee🎜Deux façons de modifier directement les données Par rapport à l'utilisation de $path pour modifier directement les données, la méthode officielle 🎜🎜 a clairement indiqué que la méthode $patch est optimisée et accélérera la modification et affectent le programme. Il y a d'énormes avantages en termes de performances. Par conséquent, si vous mettez à jour les données d'état avec plusieurs éléments de données en même temps, il est recommandé d'utiliser la méthode $patch pour mettre à jour. 🎜 Bien qu'il puisse être modifié directement, en raison de la structure du code, la gestion globale de l'état ne doit pas modifier l'état directement au niveau de chaque composant. Il doit être modifié de manière unifiée dans les actions (piain n'a pas de mutations. ). 🎜rrreee🎜Utilisez des actions pour modifier les données🎜🎜Appelez directement la méthode dans actions, et vous pouvez passer des paramètres 🎜rrreee🎜Réinitialisez les données dans l'état🎜🎜Il y a $ dans <code> store La méthode de réinitialisation peut directement réinitialiser les données dans store🎜rrreee🎜Stockage persistant Pinia🎜🎜🎜Pour obtenir un stockage persistant, vous devez utiliser les plug-ins suivants🎜 🎜rrreee🎜🎜fichier de configuration<code>index.js sous le dossier store, introduisez le plug-in pinia-plugin-presist 🎜🎜rrreee🎜🎜 configurez test.js sous le dossier du magasin File, utilisez l'attribut presist pour configurer 🎜🎜rrreee🎜🎜enable:true, activez le stockage persistant, la valeur par défaut est d'utiliser sessionStorage pour stocker 🎜 -< code> stratégies, pour plus de configuration 🎜 - clé, lorsque la clé n'est pas définie, la clé de stockage est le premier attribut de < code>definePinia, définissez la valeur de la clé, puis personnalisez le nom de l'attribut du stockage 🎜🎜 storage:localStorage, définissez le mode cache sur le stockage local 🎜🎜paths , et définissez-le sur state s'il n'est pas défini. Les données utilisées sont conservées et stockées lors de la configuration, seuls les attributs définis sont conservés 🎜🎜🎜Implémentation modulaire Pinia🎜🎜L'implémentation modulaire signifie créer un nouveau fichier js. dans le magasin du module à utiliser, comme les fichiers user .js. Ensuite, le contenu de configuration est le même que celui des autres modules, défini en fonction de vos propres besoins, puis introduit sur la page correspondante. 🎜🎜🎜Entre les magasins de Pinia Appelez chacun other🎜🎜Par exemple : test.js obtient la valeur de l'attribut name de state dans user.js, dans < code>test.js est introduit dans le composant 🎜rrreee🎜A.vue dans user.js🎜rrreee🎜user.js</ code>, appelez la méthode <code>getUserData dans test.js pour obtenir la valeur name dans uesr.js🎜const actionBtn = () => {
testStore.getUserData()
};（学习视频分享：编程基础视频）
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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
