浅析Pinia的简单使用

一、Pinia 简介及其使用

1、pinia 和 vuex 具有相同的功效，是 Vue 的存储库，它允许您跨组件/页面共享状态。其设计使用的是 Composition api，更符合vue3的设计思维。Pinia 对 Vue 2 和 Vue 3 都有效。

2、安装 Pinia：npm i pinia -S （也可以使用 yarn、pnpm 等）

3、Pinia 的引入

　　一般我们在做项目的时候，都会在 main.js 或者 main.ts 中引入

// vue3 中引入的使用
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')

// vue2 中引入的使用
import { createPinia } from 'pinia'
const pinia = createPinia();
new Vue({
  el: '#app',
  // 其他选项...// 注意同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
  pinia
})

二、Pinia 模块的创建

　　在vue项目中，在src文件夹下面创建一个store文件夹专门来管理 pinia 模块。在文件夹下面我们可以创建多个js文件来对应我们的模块。下面我在 store 文件夹下面创建的一个index.js模块

// 想要使用必须先引入 defineStore
// defineStore 方法有两个参数，第一个参数是模块化名字，即应用程序中store的唯一id（相当于身份证一样，不能重复）
// 第二个参数是选项，对象里面有三个属性，相比于 vuex 少了一个 mutations
import { defineStore } from 'pinia'

// useStore 可以是 useUser 之类的任何东西
export const useStore = defineStore('main', {
  // 推荐使用：完整类型推断的箭头函数（所有这些属性都将自动推断其类型）
  state: () => {
    return { // 存放的就是模块的变量
      count: 10,
      name: "gwf",
      isAdmin: true,
    }
  },
  getters:{ // 相当于vue里面的计算属性，可以缓存数据 },
  actions:{ // 可以通过actions 方法，改变 state 里面的值。}
})

三、Pinia 数据的使用

1、以vue3 页面为例，简单介绍一下，Pinia页面的使用：我们需要先定义一个 store，因为在 setup() 中调用 useStore() 之前不会创建 store。

<template>
    <p>{{store.count}}</p>
</template>
<script setup>
// 这里引入我们导出的 useStore；
import { useStore } from '../store/index.js'// 值得注意的是 useStore 是一个方法，调用之后会给我们返回一个对象
//  这个时候，你就会发现，页面上就能正常显示我们在index.js 里面的 state 里面定义的 count 数据
const store = useStore()
</script>

　　当然如果你vuex辅助函数用的非常熟练的话，你就会产生疑问，在上面代码 p 标签中，我不写store.count。直接写成 count 行不行呢？

　　可以。我们可以使用 pinia 给我们提供的 storeToRefs 来展开。你会发现他其实和 vue3 中使用的 toRefs 非常的像。

import { useStore } from '../store/index.js'
import { storeToRefs } from 'pinia'
const store = useStore()
const { count } = storeToRefs(store)

2、结构store

　　store 是一个用 reactive 包裹的对象，这意味着不需要在 getter 之后写 .value，但是，就像 setup 中的 props 一样，我们不能对其进行解构。

　　为了从 Store 中提取属性同时保持其响应式，需要使用 storeToRefs()。它将为任何响应式属性创建 refs。当您仅使用 store 中的状态但不调用任何操作时，这很有用。

四、pinia 中修改 state 数据的方法

1、直接修改 store 对象的数据

<button @click="add">累计</button>

const store = useStore();
const add = () => {
    store.count ++ 
}

　　通过上面的代码，我们会发现，当我点击 button 按钮累加的时候，页面中 count 数据就跟着发生了变化

2、$patch 方法传递一个对象来修改

const add = () => {
  store.$patch({
    count: store.count + 1,
    num: store.num + 1
  })
}

　　通过以上代码我们也能实现数据的修改，但是为什么感觉比第一个还复杂了呢？
　　官方给我们的解释是：patch 是做了优化的，还有就是 patch 可以同时修改多个数据。

3、$patch 方法传递一个函数来修改

　　上面使用 $patch 传递一个对象来修改数据，那如果传递的是一个函数，该怎么修改呢？

const add = () => {
  store.$patch(state => {
    state.count++;
    state.num++;
  })
}

　　特别注意：如果是传递函数的话 state 就是我们在 pinia 模块里面定义的存储数据的对象，不在是页面中使用的 store 对象了

4、actions 里面修改数据

　　如果我们的数据，需要一个复杂的处理过程的话，我们最好把他，放到我们的 actions 里面去修改，这样的话，方便我们后期的维护。它们非常适合定义业务逻辑。

// 1、首先需要在 actions 里面定义一个方法
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
  // ...
  actions:{
    piniaAdd(){ 
       this.count++;
       // 特别注意：在这里this指向的就是当前的实例化出来的对象，
       // piniaAdd 该函数如果换成箭头函数的话，this 指向就会发生改变，不能再使用 this.count++  了
    }
  }
})

// 2、如何使用
const store = useStore();
const add = () => {
　　store.piniaAdd();
}

5、重置状态：可以通过调用 store 上的 $reset() 方法将状态重置到其初始值

// 2、重置状态：可通过调用 store 上的 $reset() 方法将状态重置到其初始值：
const store = useStore()
store.$reset()

6、访问其他 store 操作

　　要使用另一个 store ，您可以直接在操作内部使用它：const auth = useUserStore()

import { useUserStore } from './userStore'
export const useStore = defineStore('main', {
  state: () => ({ // ...  }),
  actions: {
    async fetch(params) {
      const auth = useUserStore()
      auth.isAdmin && this.user = await fetchUser()
    }
  },
})

7、注意在router.js路由鉴权中使用时，必须写在router.beforeEach里面。

五、数据持久化

　　使用 pinia-plugin-persist 插件

// 安装
npm i pinia-plugin-persist --save

// 引入：在main.js中引入持久化插件
import { createPinia } from "pinia";
import piniaPluginPersist from "pinia-plugin-persist"; //pinia持久化
const pinia = createPinia();
pinia.use(piniaPluginPersist);

　　特别注意：固化插件是 pinia.use 并不是 app.use

// 使用
export const loginStore = defineStore('main', {
  //持久化
  persist: {
    enabled: true, // 自定义持久化参数
    // 指定存储的位置以及存储的变量都有哪些，该属性可以不写，
    // 在不写的情况下，默认存储到 sessionStorage 里面,默认存储 state 里面的所有数据
    strategies: [
      {
        key: 'token', // 自定义key
        storage: localStorage, // 自定义存储方式，默认sessionStorage
        // 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化
        paths: ['token']
      },
      {
        key: 'menulist',
        storage: localStorage,
        paths: ['menulist']
      }
    ]
  }
})

posted @ 2022-10-20 21:21 古兰精阅读(1319) 评论(0) 编辑收藏举报

刷新页面返回顶部

古兰精