提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

快速了解并使用pinia

2023-02-18 16:29:05 时间

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

vue3 配套推荐了pinia插件来替换了之前的vuex ,

本文将介绍pinia，让你快速了解并使用pinia

0 1

pinia介绍

读音：

pí ní yà

皮 尼 亚

vuex的代替产品，尤大大也是强烈推荐

官网：https://pinia.vuejs.org/

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。它和vuex的作用一样都是做状态管理的。

0 2

pinia的优点

和vuex一样，pinia也是vue2、vue3都支持。

1、抛弃了Mutations的操作，只有state、getters和actions.

极大地简化了状态管理库的使用，让代码编写更加容易直观。其实很多其他的状态管理都是没有Mutations的例如mobx

2、完全支持ts

3、代码更加简洁

总结一下就是，不用很久vuex就会被替换。

0 3

pinia的使用

1. 安装 

npm i pinia

2. 仓库的定义

与 vuex 的不同之外，在每个模块文件，都要定义仓库；

注：defineStore的第一个参数必须唯一

import { defineStore} from 'pinia'
const mainStore = defineStore('admin',{
state:()=>{
return {
tit:'hello world!'
    }
  },
getters:{
    getTit(){
      return this.tit;
    }
  },
actions:{
    setTit(value){
      this.tit=value;
    }
  }
})
export default mainStore;

与vuex的变化：

1. state是一个函数 ，函数中返回一个对象

2. 没有了mutaions

3. getters 与 actions 中使用state的属性 , 通过this 关键字

多模块间的使用

import { defineStore} from 'pinia'
import adminStore from './admin';
//const admin=adminStore(); 不能在这里调用，会报错
const mainStore = defineStore('main',{
state:()=>{
return {
tit2:'hello world2!'
    }
  },
actions:{
    setTit2(){
const admin=adminStore();
this.tit2=admin.tit+this.tit2;
    }
  }
})
export default mainStore;

注意：

const admin=adminStore();这句话必须在调用的时候执行，不能在一开始就执行

3. 仓库的使用

main.js 中的配置

//引入pinia
import { createPinia } from 'pinia
// 创建pinia 实例
const pinia = createPinia()

// 挂载到 Vue 根实例上
createApp(App).use(pinia).mount('#app')

文件中使用 pinia的方法

<script lang="ts" setup>
import mainStore from "../store/index";
const store=mainStore(); //执行mainStore这个函数得到store。
// 这里的作用是激活当前组件使用pinia的能力。
// 通过store.xxx 获取state的值，getters与actions相应的方法
// 如：store.tit/store.getTit/store.setTit('新标题')
</script>

pinia中状态的修改

方法1：与vuex相对应的，通过action来修改 

<template>
<h2>{{ store.tit }}</h2>
<button @click="setTit">修改tit</button>
</template>

<script lang="ts" setup>
import mainStore from "../store/index";

let store = mainStore();
let setTit = () => {
        store.setTit();
    }
</script>

方法2：直接修改 

<template>
<h1>{{store.tit}}</h1>
<!-- <h2>{{tit}}</h2> -->
<button @click="setTit">修改tit</button>
</template>

<script lang="ts" setup>
import mainStore from "../store/index";
const store=mainStore();
const setTit=()=>{
        store.tit='hello vue3';
    }

// let {tit}=mainStore();
// let setTit=()=>{
//     tit='hello vue3';
// }
</script>

注意，这里展示顺便展示上个知识点遗留的问题，就是不能解构，如果解构了，就不能修改，变成一次性的了。

如果觉得每次都写store.xxx很麻烦，官方还提供了方法。

方法3：利用storeToRefs直接修改

<template>
<h2>{{ tit }}</h2>
<button @click="setTit">修改tit</button>
</template>

<script lang="ts" setup>
import mainStore from "../store/index";
import { storeToRefs } from "pinia";
//storeToRefs 就是把对象里面的所有值都转化成ref对象
//这样上面就可以直接使用，但是下面再用的时候要.value
let { tit } = storeToRefs(mainStore());
let setTit = () => {
        tit.value = 'hello vue3';
    }
</script>

注意：storeToRefs 就是把对象里面的所有值都转化成ref对象，这样上面就可以直接使用，但是下面再用的时候要.value

总结至于用不用storeToRefs，大家看自身情况

方法4：利用$patch修改

<template>
    <h2>{{ store.tit }}</h2>
    <button @click="setTit">修改tit</button>
</template>

<script lang="ts" setup>
    import mainStore from "../store/index";
    
    let store = mainStore();
    let setTit = () => {
        store.$patch({
            tit:'aaa'
        })
    }
</script>

‍

同时处理多个数据的时候性能比直接修改高性能高；

今天的分享结束，大家有了解pinia的使用了不，哈哈

苟有恒 , 何必三更眠五更起

相关文章