Pinia|VUe的状态管理库

阅读收获 阅读完本篇文章,你将会有以下收获:

  1. pinia是什么?有哪些优势?基本使用步骤。
  2. 充分了解 pinia 核心概念state、getter、action。
  3. pinia 如何实现数据持久化。
  4. 了解pinia的其他实例api,如: reset、 onAction等。

pinia是什么

官方解释: Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 pinia是vuex的升级版,因为有vue3新特性的加持,比vuex更简单、更灵活。 那pinia还有哪些优势呢?

pinia的优势

  1. vue2/3都可以用。
  2. pinia中只有state、getter、action,抛弃了Vuex中的Mutation,用法更简单了。
  3. pinia 中 action支持同步和异步
  4. pinia 不用在使用模块(module)对store进行分割。
  5. pinia 支持插件来扩展自身功能。
  6. 支持服务端渲染 (SSR) 那如何使用pinia呢? 安装 首先需要在项目中安装pinia。
yarn add pinia

引入到项目

安装完成后,就可以将pinia引入到项目中了,只需要调用createPinia()方法将pinia实例化,然后挂载到vue实例上就可以了。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'


const app = createApp(App)

const pinia = createPinia()
app.use(pinia)

app.mount('#app')

创建store

下一步就应该去创建我们的数据仓库store了,store中存储的是我们需要共享的数据。 创建store需要调用pinia中的defineStore方法,该方法接受两个参数,第一个参数是store的唯一 id,第二个参数是store的配置属性。 defineStore方法配置store属性时,有两种写法,一种是Option 对象形式,一种是Setup 函数形式。

对象形式(Option Store)

与 Vue 的选项式 API 类似,我们需要传入一个带有 state、actions 与 getters 属性的 Option 对象。 与vue组件相比,你可以认为 state 是 store 的数据 (data),getters 是 store 的计算属性 (computed),而 actions 则是方法 (methods)。 这种方式非常直观,推荐使用。

// src/store/user.js
import { defineStore } from "pinia"

export const useUserStore = defineStore("user", {
    state: () => ({
        name: "石头",
        age: 18,
    }),
    getters: {
        getPerson: (state) => {
            return `${state.name}今年${state.age}岁了`
        }
    },
    actions: {
        changeName(name) {
            const that = this;
            setTimeout(() => {
                that.name = name;
            }, 1000)
        },
    },
})

函数形式(Setup store)

与 Vue 组合式 API 的 setup 函数 相似,我们可以传入一个函数,该函数定义了一些响应式属性和方法,并且返回一个带有我们想暴露出去的属性和方法的对象。 在 Setup Store 中:

● ref() 就是 state 属性

● computed() 就是 getters

● function() 就是 actions Setup store 比 Option Store 带来了更多的灵活性,因为你可以在一个 store 内创建侦听器,并自由地使用任何组合式函数。 不过,请记住,使用组合式函数会让 SSR 变得更加复杂。

import { defineStore } from "pinia"
import {computed, ref} from "vue";

export const useThemeStore = defineStore("theme", ()=>{
    const defaultSize = ref(16)

    const getBigSize = computed(() => {
        return  defaultSize.value + 10
    })

    const changeSize = (size) => {
        defaultSize.value = size
    }
    return {
        defaultSize,
        getBigSize,
        changeSize
    }
})

使用

那我们创建仓库后怎么去使用呢? 引入上面创建的useUserStore,调用useUserStore方法得到仓库userStore实例。 可以直接使用userStore访问仓库中的属性。 上面两种方式创建的store仓库,在这里使用方法都是一样的。

1. 对象形式(Option Store)

import { useUserStore } from "@/store/user"

const userStore = useUserStore()

console.log('user',userStore)


2. 函数形式(Setup store)

import { useThemeStore } from "@/store/theme"
const themeStore = useThemeStore()
console.log('theme',themeStore)

现在我们已经学会如何使用pinia了,但pinia中还有几个概念state、getter、action需要我们继续深入了解。 让我们继续吧。

state

我们都知道store是用来存放公共数据的,那么数据具体存放在哪里呢?就是存放在state中。

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小白菜",
      age: 25,
      sex: "男",
    };
  },
});

我们还需要知道state中的数据是如何读取和修改的,又有哪些需要注意的地方。

读取 state


import { useUsersStore } from '@/stores/user'
const userStore = useUsersStore()


修改 state

方式一:直接修改

userStore.name = '萝卜干'

方式二:$patch({}) 对象形式 批量修改

$patch 是 pinia 提供的一个api,用来批量修改 state 中的数据,接收一个对象参数,对象中的属性就是 state 中的属性,值就是要修改的值。 可修改单个或多个属性,pinia内部做了优化,相同属性会被自动覆盖。

userStore.$patch({
 name: '土豆粉',
 age:19
})

方式三:$patch(()=>{}) 回调形式

这是$patch的另一种写法,回调默认接收一个参数,也就是store中的state,在回调函数中修改state中的数据。 推荐使用

userStore.$patch((state) => {
    state.name = '小白菜'
    state.age = 90
})

方式四:在actions中修改

下面会讲到

getters

有时候我们需要拿到state计算或处理后的数据,但又不能影响到原来的state,这时候就需要用到getters了。 getter 也就是 store 中的计算属性了,返回一个新的结果,与Vue中的计算属性computed一样,会被缓存。 提醒:

  1. getters是一个对象
  2. 默认接收一个state参数,就是我们仓库中的state,该参数是可选的。
  3. 普通函数,可以使用 this 访问整个 Store 的实例 基本使用
export const useUserStore = defineStore('user', {
  state: () => ({
    name: '小白菜',
    age: 18,
  }),
  getters: {
      getUser() {
          return `${this.name},今年${this.age}岁`
      }, 
      getUser2: (state) => {
          return `${state.name},今年${state.age}岁`
      }
  },
})

调用

与state使用方式一样,直接使用(如:userStore.getUser)就可以了。

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
console.log('getUser', userStore.getUser)
console.log('getUser2', userStore.getUser2)

使用其他getter

我们也可以在某个getter中使用其他的getter,这样就可以实现getter的复用了。 只需要将箭头函数转换为普通函数,函数内部通过 this 来调用当前 Store 上的数据和方法。

export const useStore = defineStore('main', {
  state: () => ({
    message: 'Hello World',
  }),
  getters: {
    fullMessage: (state) => `The message is "${state.message}".`,
    // 这个 getter 返回了另外一个 getter 的结果
    emojiMessage() {
      return `    ${this.fullMessage}`
    },
  },
})

给getter传参

我们还可以给getter传递参数,但getter 本身是不支持参数,需要返回一个带有入参的函数,实现给getter传参的效果。 注意:这样 Getter 将不再被缓存,只是个被调用的函数

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => ({
      message: 'Hello World',
  }),
  getters: {
    // 定义一个接收入参的函数作为返回值
    signedMessage: (state) => {
      return (newName) => `${newName} say: "The message is ${state.message}".`
    },
  },
})

调用

const store = useStore()

const signedMessage = store.signedMessage('Petter')

console.log('signedMessage', signedMessage)
// Petter say: "The message is Hello World".

actions

前面我们说到的getters主要是数据层面,并没有涉及具体的业务逻辑,那如果我们写业务代码的话,就需要用到actions了。 actions属性就和我们组件代码中的methods相似,用来放置一些处理业务逻辑的方法。 actions属性值同样是一个对象,该对象里面也是存储的各种各样的方法,包括同步方法和异步方法。

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => {  
    return {
      name: 'hello',
    }
  },
  getters: {}, 
  actions: {    
    // 同步更新 name 值
    updateNameSync(newName) {
      this.name = newName
      return '同步修改state中的name值完成'
    },

    // 异步更新 name 值
    async updateName(newName) {
      return new Promise((resolve) => {
        setTimeout(() => {
          // 这里的 this 是当前的 Store 实例
          this.name = newName
          resolve('异步修改完成')
        }, 3000)
      })
    },
   },  
})

调用

在 Pinia 像普通的函数一样使用即可,不需要和 Vuex 一样执行 commit 或者 dispatch,

import { useUserStore } from '@/store/user'

const store = useUserStore()

// 立即执行
store.updateMessageSync('同步')

// 3s 后执行
store.updateMessage('异步')

重置

那我们想重置state中的数据怎么办呢? $reset()是pinia提供的一个api,用来重置state中的数据,将state中的数据重置为初始值。

// 通过调用 store 的 $reset() 方法将 state 重置为初始值。
userStore.$reset()

解构

store使用过程中,还有另外一个用法就是解构,我们可以把store中的state进行解构使用。 但是解构会失去响应式,需要 StoreToRefs 避免丢失响应式。


import { useUsersStore } from '@/stores/user'
const userStore = useUsersStore()
const {name} = userStore



State 也可以使用解构,但是解构会失去响应式,需要 StoreToRefs 避免丢失响应式

import { storeToRefs } from 'pinia'
const userStore = useUsersStore()
const { name } = storeToRefs(userStore)

其他实例api

上面已经介绍了reset两个实例api,还有几个实例api不常用,我想我们应该了解一下。

$subscribe 当state中的值任意一个发生变化的时候,就会触发该函数

/**
 * 当state中的值任意一个发生变化的时候,就会触发该函数
 * 
 * args: 里面会记录新旧值
 * state:就是当前操作的state的实例
 * options: 是一个对象,比如detached,这是一个boolean参数,当这个参数为true时,表明即使当前组件销毁后,也继续监控state里面值的变化,可选
 */
 goodsStore.$subscribe((args, state) => {
  console.log('args', args)
  console.log('state', state)
},{
  detached: true
})

$onAction 当调用actions里面的函数的时候,就会触发该函数

/**
 * 当调用actions里面的函数的时候,就会触发改函数
 *
 * args:接收参数,里面封装了多个api:
 *      args.after:当$onAction里面的逻辑执行完成之后才会执行args.after函数逻辑,所以args.after放置的位置于执行顺序无关
 *      args.onError:当调用actions里面的函数发生错误时,args.onError函数也会执行
 *      args.args:接收调用actions里面的函数传递的参数,是一个数组
 *      args.name:执行的actions里面的函数的名称
 * detached: 这是一个boolean参数,当这个参数为true时,表明即使当前组件销毁时,也继续监控actions里面的函数调用,可选
 */
goodsStore.$onAction((args) => {
    args.after(() => console.log("args.after""===="));
    console.log("args", args);
}, true);

数据持久化

store中的数据,刷新页面后就丢失了,如果想保留这些数据,就要用到数据持久化了。 推荐使用pinia-plugin-persistedstate 安装插件

yarn add pinia-plugin-persistedstate
将插件添加到pinia

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

开启数据持久化

在仓库中指定persist为true,就可以开启数据持久化了。 开启后默认有以下配置: ● 使用 localStorage 进行存储

● store.$id 作为 storage 默认的 key

● 使用 JSON.stringify/JSON.parse 进行序列化/反序列化

● 整个 state 默认将被持久化

下面是Option Store写法,Setup Store 大同小异,去看官方文档吧。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

其他操作

持久化配置|https://blog.csdn.net/m0_53808238/article/details/129751966 除上面默认配置外,我们还可以进行一些其他的配置:

● 指定存储的key

● 指定要持久化的数据

● 指定持久化的存储方式,默认 localStorage

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
 state: () => ({
  user: {
   name: '小白菜',
   age: 18,
  },
  company: '腾讯',
  department: '前端',
 }),
 persist: {
     // 指定持久化的key
     key: 'my-custom-key',
     // 指定要持久化的数据
     paths: ['user.name''company'],
    // 指定持久化的存储方式,默认 localStorage
     storage: sessionStorage,
 },
})

ᕦ( •̀∀•́)ᕤ

本文由 mdnice 多平台发布

你可能感兴趣的:(前端)