文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3状态管理之Pinia的入门使用教程

2024-04-02 19:55

关注

Vue3 新的发展方向(来源于尤大知乎)

Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本

基于 Vite 的极速构建工具链

<script setup> 带来的开发体验更丝滑的组合式 API 语法

Volar 提供的单文件组件 TypeScript IDE 支持

vue-tsc 提供的针对单文件组件的命令行类型检查和生成

Pinia 提供的更简洁的状态管理

新的开发者工具扩展,同时支持 Vue 2/Vue 3,并且提供一个插件系统来允许社区库自行扩展开发者工具面板。

一、Pinia 简介与基础

1.1 Pinia 简介

1.2 Pinia 基础

  Vuex 与 Pinia 对比

  Pinia 各部分作用

  Pinia 官方示例JS版本

import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
  state: () => ({
    
    todos: [],
    
    filter: 'all',
    // type will be automatically inferred to number
    nextId: 0,
  }),
  getters: {
    finishedTodos(state) {
      // autocompletion! ✨
      return state.todos.filter((todo) => todo.isFinished)
    },
    unfinishedTodos(state) {
      return state.todos.filter((todo) => !todo.isFinished)
    },
    
    filteredTodos(state) {
      if (this.filter === 'finished') {
        // call other getters with autocompletion ✨
        return this.finishedTodos
      } else if (this.filter === 'unfinished') {
        return this.unfinishedTodos
      }
      return this.todos
    },
  },
  actions: {
    // any amount of arguments, return a promise or not
    addTodo(text) {
      // you can directly mutate the stat 00e
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})

二、Pinia 在Vue3-Vite中的使用

2.1 基础使用流程

① 创建一个vue vite项目

PS C:\Users\FORGET\Desktop\vue-pinia-demo> npm init vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
√ Project name: ... pinia-demo
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in C:\Users\FORGET\Desktop\vue-pinia-demo\pinia-demo...

Done. Now run:

  cd pinia-demo
  npm install
  npm run dev
PS C:\Users\FORGET\Desktop\vue-pinia-demo> cd .\pinia-demo\
PS C:\Users\FORGET\Desktop\vue-pinia-demo\pinia-demo> npm install

② 安装 pinia,-S是为了将其保存至package.json中,便于Git管理给其他人的使用

PS C:\Users\FORGET\Desktop\vue-pinia-demo\pinia-demo> npm install pinia -S

# package.json文件中
 "dependencies": {
    "pinia": "^2.0.9",
    "vue": "^3.2.25"
  },

③ 创建 pinia 实例并挂载到 vue中

// main.ts 文件
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
// 创建 Pinia 实例
const pinia = createPinia()
// 创建 Vue 实例
const app = createApp(App)
// 挂载到 Vue 根实例
app.use(pinia)
app.mount('#app')

④ 在src文件下创建一个store文件夹,并添加index.ts

// store/index.ts
import { defineStore } from 'pinia'
// 1. 定义容器、导出容器
// 参数1:容器的ID,必须是唯一的,后面Pinia会把所有的容器挂载到根容器
// 参数2:一些选项对象,也就是state、getter和action
// 返回值:一个函数,调用即可得到容器实例

export const useMainStore =  defineStore('main',{
    // 类似于Vue2组件中的data,用于存储全局状态数据,但有两个要求
    // 1. 必须是函数,目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 2. 必须是箭头函数,这样是为了更好的 TS 类型推导
    state:()=>{
        return {
            info:"pinia 可以使用"
        }
    },
    getters:{},
    actions:{}
})

// 2. 使用容器中的 state
// 3. 通过 getter 修改 state 
// 4. 使用容器中的 action 同步和异步请求

⑤ 在组件中使用

<template>
  <h1>{{ mainStore.info}}</h1>
</template>

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

<style>
</style>

2.2 state 中数据的解构访问

状态管理中

// store/index.ts
state:()=>{
        return {
            info:"pinia 可以使用",
            count:10
        }
    },

组件中

<template>
  <h1>{{ mainStore.count }}</h1>
  <h1>{{ mainStore.info }}</h1>
  <hr />
  <h1>{{ count }}</h1>
  <h1>{{ info }}</h1>
  <p>
    <button @click="alertData">修改数据</button>
  </p>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from "../store";
const mainStore = useMainStore();
// 解构数据,但是得到的数据是不具有响应式的,只是一次性的
// 相当于仅仅只是...mainStore而已,只是做了reactive处理,并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法:
// 1. 通过使用toRefs函数,因为前面所说相当于是通过reactive处理,因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决,推荐使用
const { count, info } = storeToRefs(mainStore);
const alertData = () => {
  mainStore.count += 10
}
</script>

<style>
</style>

2.3 state 中数据的修改方式(actions和组件中)

一般的修改

const alertData = () => {
  // 方式一:最简单的方法,如下
  // 解构后更改方式
  // count.value += 10
  // 结构前更改方式
  // mainStore.count += 10
  // 方式二:若要同时修改多个数据,建议使用$patch来实现批量更新,在内部做了优化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   info: "hello"
  // })
  // 方式三:更好的批量更新方法,通过$patch传递一个函数来实现,这里的state就是useMainStore容器中的state
  mainStore.$patch(state => {
    state.count += 10
    state.info = "pinia批量更新"
  })
}

通过actions修改

// store/index.ts
// 类似于vue2组件的methods,用于封装业务逻辑,修改state
// // 注意:不能使用箭头函数来定义actions,因为箭头函数绑定外部的this
    actions:{
        changeState (){
            this.count += 10
            this.info = "actions修改数据"
        },
        changeStates (num:number){
            this.count += num + 2
            this.info = "actions修改数据"
        }
    }
const alertData = () => {
  // 方式一:最简单的方法,如下
  // 解构后更改方式
  // count.value += 10
  // 结构前更改方式
  // mainStore.count += 10
  // 方式二:若要同时修改多个数据,建议使用$patch来实现批量更新,在内部做了优化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   info: "hello"
  // })
  // 方式三:更好的批量更新方法,通过$patch传递一个函数来实现,这里的state就是useMainStore容器中的state
  // mainStore.$patch(state => {
  //   state.count += 10
  //   state.info = "pinia批量更新"
  // })
  // 方式四:通过 actions 来修改数据
  mainStore.changeState()
  mainStore.changeStates(10)
}

2.4 getters 的使用

定义

// 类似于组件的computed,用来封装计算属性,具有缓存的功能
    getters:{
    	 // 函数接收一个可选参数:state状态对象
        count10(state){
            return state.count += 10
        },
        count10(state){
            return this.count += 10
        },
        // 若使用this.count,则必须指明返回数据的类型
        count11():number{
            return this.count += 11
        }
    },

使用

<h1>{{ mainStore.count10 }}</h1>

三、Pinia 数据持久化

保存至localStorage中

import { defineStore } from 'pinia';
const useLoginStore = defineStore({
  id: 'login',
  //   state: () => ({
  //     num: 1,
  //   }),
  state: () => ({
    info: 'pinia 可以使用',
  }),
  getters: {},
  actions: {
    alertInfo() {
      this.info = '可以可以,这个秒';
    },
  },
});

// 数据持久化
// 1. 保存数据
const instance = useLoginStore();
instance.$subscribe((_, state) => {
  localStorage.setItem('login-store', JSON.stringify({ ...state }));
});
// 2. 获取保存的数据,先判断有无,无则用先前的
const old = localStorage.getItem('login-store');
if (old) {
  instance.$state = JSON.parse(old);
}
export default useLoginStore;

使用 插件 pinia-plugin-persist 可以辅助实现数据持久化功能

# 安装插件
pnpm install pinia-plugin-persist --save
// main.ts文件中
import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import piniaPluginPersist from 'pinia-plugin-persist';
const pinia = createPinia();
pinia.use(piniaPluginPersist);
const app = createApp(App);
app.use(router);
app.use(pinia);
app.mount('#app');

// 接着在对应的 store 里开启 persist 即可。数据默认存在 sessionStorage 里,并且会以 store 的 id 作为 key。
import { defineStore } from 'pinia';
import piniaPluginPersist from 'pinia-plugin-persist';
const useLoginStore = defineStore({
  id: 'login',
  //   state: () => ({
  //     num: 1,
  //   }),
  state: () => ({
    info: 'pinia 可以使用',
  }),
  // 开启数据缓存
  persist: {
    enabled: true,
  },
  getters: {},
  actions: {
    alertInfo() {
      this.info = '可以可以,这个秒';
    },
  },
});
export default useLoginStore;

其它设置,自定义保存名称,保存位置和需要保存的数据

// 开启数据缓存
  persist: {
    enabled: true,
    strategies: [
      {
        // 自定义名称
        key: 'login_store',
        // 保存位置,默认保存在sessionStorage
        storage: localStorage,
        // 指定要持久化的数据,默认所有 state 都会进行缓存,你可以通过 paths 指定要持久化的字段,其他的则不会进行持久化。
        paths: ['age'],
      },
    ],
  },

总结

到此这篇关于Vue3状态管理之Pinia入门使用的文章就介绍到这了,更多相关Vue3状态管理Pinia使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯