Pinia 基本使用

Pinia 中文文档:pinia.web3doc.top/

Pinia 的介绍

Pinia 最初是为了探索 Vuex 下一次迭代而产生的,结合了 Vue5 核心团队的很多想法。最终团队意识到 Pinia 已经实现了 Vue5 的大部分内容,决定实验 Pinia 来替代 Vuex。

Pinia 与 Vuex 的对比

  • mutations 不在存在。
  • Pinia 与 Vuex 的对比,Pinia 提供了更简单的 api,并且与 ts 一起使用时具有更可靠的类型判断。
  • 没有模块嵌套和命名空间,不在需要记住他们之间的关系。

安装 Pinia

plaintext 复制代码
yarn add pinia
# 或者使用 npm
npm install pinia

定义 Store

this 可以访问到 整个 store 的实例

plaintext 复制代码
import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id,官方的约束是use***,以use+name的一个约定,不是必须,只是建议
export const useStore = defineStore('main', {
 state: () => { // 数据
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
 getters: { // 同计算属性
    doubleCount: (state) => state.counter * 2,
  },
 actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

修改 Store 的数据

注意:修改的数据如果直接结构,数据不是响应式的

使用 Vue 的 toRefs()或 Pinia 的 storeToRefs()

  1. 在组件中引入 Store 直接修改

    js 复制代码
    // 简单粗暴
    import {Store} from '../store/index'
    const store = Store()
    const handleClick = () => {
    	store.count++
    }
  2. 使用$patch 对象

    js 复制代码
    // 多数据修改做过优化
    import {Store} from '../store/index'
    const store = Store()
    const handleClick = () => {
    	store.$patch({
    		count:store.count+2
    	})
    }
  3. 使用$patch 函数

    js 复制代码
    // 使用的是函数,可以处理复制的业务
    import {Store} from '../store/index'
    const store = Store()
    const handleClick = () => {
    	store.$patch((state)=>{
    		state.count++
    	})
    }
  4. 在 actions 中修改

    js 复制代码
    // 用于复杂或多处使用相同的方法
    actions: {
        changeState(){
            this.count++
        }
    }
    // 在组件中使用
    store.changeState()

Pinia 中的 getters 使用

与 Vue 的计算属性一样,修改的数据有缓存,对性能优化有好处

js 复制代码
getters: { // 同计算属性
	doubleCount: (state) => state.counter * 2,
	phoneHidden: (state) => state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
}
// 组件中使用
store.doubleCount

Pinia 中 Store 的互相调用

不同的 Store 的相互调用非常简单,和组件使用相同

js 复制代码
import {userInfo} from '../store/userInfo'
const store = userInfo()
store.xxx
需要在哪使用直接拿即可

Pinia 组合式

上面的使用方法更适合 Vue2 的形式,在 Vue3 中更使用组合式

将 defineStore 的第二个参数改为函数,需要使用的值返回出去

typescript 复制代码
import { defineStore } from "pinia";
import { ref } from "vue";

// 定义 Store,使用函数,更适合Vue3,注意要使用ref并将需要的数据或函数返回出去
export const useTestStore = defineStore(
  "test",
  () => {
    // 定义的变量使用ref
    const testText = ref<string>("");

    // 保存会员信息,登录时使用
    const setTestText = (val: string) => {
      testText.value = val;
    };

    // 清理会员信息,退出时使用
    const clearsetTestText = () => {
      testText.value = "";
    };

    // 返回需要使用的变量,和setup函数一样
    return {
      testText,
      setTestText,
      clearsetTestText,
    };
  }
);

持久化

pinia 的数据默认情况下刷新后会丢失

pinia-plugin-persistedstate:帮助 pinia 持久化的插件

uniapp 的代码示例:

typescript 复制代码
// index.ts
import { createPinia } from "pinia";
import persist from "pinia-plugin-persistedstate";

// 创建 pinia 实例
const pinia = createPinia();
// 使用持久化存储插件
pinia.use(persist);

// 默认导出,给 main.ts 使用
export default pinia;

// 统一导出
export * from "./modules/test";
typescript 复制代码
// modules/test.ts
import { defineStore } from "pinia";
import { ref } from "vue";
// 实际上可以直接使用 uni.getStorageSync() ,但是使用原生的方式理论上性能会好一点(不需要经过uniapp的编译/处理)
let persist;
// #ifdef H5 || WEB
persist = true;
// #endif
// #ifndef H5 || WEB
persist = {
  storage: {
    getItem(key: string) {
      return uni.getStorageSync(key);
    },
    setItem(key: string, value: any) {
      uni.setStorageSync(key, value);
    },
  },
};
// #endif

// 定义 Store,使用函数,更适合Vue3,注意要使用ref并将需要的数据或函数返回出去
export const useTestStore = defineStore(
  "test",
  () => {
    const testText = ref<string>("");

    // 保存会员信息,登录时使用
    const setTestText = (val: string) => {
      testText.value = val;
    };

    // 清理会员信息,退出时使用
    c
相关推荐
追逐时光者4 小时前
找 Vue 后台管理系统模板看这个网站就够了!!!
vue.js
excel4 小时前
一文读懂 Vue 组件间通信机制(含 Vue2 / Vue3 区别)
前端·javascript·vue.js
excel12 小时前
dep.ts 逐行解读
前端·javascript·vue.js
前端大卫13 小时前
一个关于时区的线上问题
前端·javascript·vue.js
IT派同学14 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
铅笔侠_小龙虾17 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
sniper_fandc18 小时前
Axios快速上手
vue.js·axios
醒了接着睡1 天前
Vue3 响应式中的 Reactive
vue.js
paopaokaka_luck1 天前
基于SpringBoot+Vue的志行交通法规在线模拟考试(AI问答、WebSocket即时通讯、Echarts图形化分析、随机测评)
vue.js·人工智能·spring boot·后端·websocket·echarts