vue3新一代状态管理库 Pinia

最新推荐文章于 2024-09-11 22:31:16 发布

pckzzy105

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量45

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/pckzzy105/article/details/132425335

版权

Pinia优势

Pinia是一个全新的Vue状态管理库，是Vuex的代替者，尤雨溪强势推荐

1.Vue2 和 Vue3 都能支持
2.抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库
3.不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化
4.TypeScript支持

Pinia 基本使用

初始化项目： npm init vite@latest
安装Pinia: npm i pinia

挂载Pinia

import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia)

创建Store

import { defineStore } from "pinia";

export const useStore = defineStore('main', {
  state: () => {
    return {
      msg: 'hello world hhhh',
      Number: 1
    }
  },
  getters: {},
  actions: {}
})

使用Store

<template>
  <div>HelloWorld</div>
  <div>{{store.msg}}</div>
</template>

<script setup lang="ts">
import { useStore } from "../index";
const store = useStore()
</script>

解构Store

当store中的多个参数需要被使用到的时候，为了更简洁的使用这些变量，我们通常采用结构的方式一次性获取所有的变量名

ES传统方式解构(能获取到值，但是不具有响应性)

<template>
  <div>HelloWorld</div>
  <div>{{ store.msg }}</div>
  <div>{{ number }}</div>
  <button @click="number++">+++</button>
</template>

<script setup lang="ts">
import { useStore } from "../index";
const store = useStore();
const { number } = store;
</script>

<style scoped></style>

Pinia解构方法：storeToRefs

<template>
  <div>HelloWorld</div>
  <div>{{ store.msg }}</div>
  <div>{{ number }}</div>
  <button @click="number++">+++</button>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useStore } from "../index";
const store = useStore();
// const { number } = store;
const { number } = storeToRefs(store);
</script>

<style scoped></style>

多条数据修改

通过基础数据修改方式去修改多条数据也是可行的，但是在 pinia 官网中，已经明确表示$patch 的方式是经过优化的，会加快修改速度，对性能有很大好处，所以在进行多条数据修改的时候，更推荐使用$patch

`$patch` 方法可以接受两个类型的参数，函数和对象

`$patch` + 对象

`$patch` + 函数：通过函数方式去使用的时候，函数接受一个 state 的参数，state 就是 store 仓库中的 state

const change = () => {
  store.$patch({
    msg: 'hhhhhhhhhhhh',
    number: store.number + 100
  })
}

const change1 = () => {
  store.$patch((state)=> {
    state.msg = 'hhhhhhhhhhhh'
    state.number = state.number + 100
  })
}

Pinia中的Getters

Pinia 中的 getter 和 Vue 中的计算属性几乎一样，在获取 State值之前做一些逻辑处理getter 中的值有缓存特性，如果值没有改变，多次使用也只会调用一次添加 getter方法

getters: {
    addNumber(state) {
      return state.number * state.number1
    }
  },

<div>{{store.addNumber}}</div>
<div>{{store.addNumber}}</div>
<div>{{store.addNumber}}</div> //多次调用也只会执行一次

getter 中不仅可以传递 state 直接改变数据状态，还可以使用 this 来改变数据,但要说明对应类型

getters: {
    addNumber():any {
      // return state.number * state.number1
      return this.msg
    }
  },

store之间的相互调用

在 Pinia 中，可以在一个 store 中 import 另外一个 store ，然后通过调用引入 store 方法的形式，获取引入 store 的状态

export const useStore = defineStore('use', {
  state: () => {
    return {
      msg: 'hello world hhhhxxx',
      number: 2,
      number1: 3
    }
  },
  getters: {
    addNumber():any {
      // return state.number * state.number1
      return this.msg
    }
  },
  actions: {

  }
})

export const mainStore = defineStore('main', {
  state: () => {
    return {
      msg: 'hello world hhhh',
      number: 1
    }
  },
  getters: {
    addNumber() {
      console.log(useStore().msg);
    }
  },
  actions: {}
})