当前位置：首页 > 技术分析 > 正文内容

VUE最新状态管理工具（vue状态管理工具有哪些）

ruisui883个月前 (02-03)技术分析12

大家好，我是程序视点的小二哥!

前言

在VUE项目开发中，一些数据常常被多个组件频繁使用，为了管理和维护这些数据，就出现了状态管理模式。

今天小二哥要给大家推荐的不是VueX，而是称为新一代的状态管理工具的Pinia.js。

添加图片注释，不超过 140 字（可选）


关于Pinia.js

Pinia.js 由 Vue.js团队成员所开发的，是新一代的 Vuex，即 Vuex5.x，在 Vue3.0 项目的使用中备受推崇。


添加图片注释，不超过 140 字（可选）

它已经加入官方团队了哦！

Pinia.js定位和特点：

  • 完整的 typescript 的支持；
  • 极其轻量，压缩后的体积只有1.6kb;
  • 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
  • actions 支持同步和异步；
  • 没有模块嵌套，只有 store 的概念，能够构建多个 store，store 之间可以自由使用，更好的代码分割；
  • 关联 Vue Devtools 钩子，提供更好地开发体验；

使用

安装脚手架vite

首先确保使用的脚手架是vite

// 安装vite
 npm init vite@latest

安装依赖

npm install pinia --save

以上安装完成之后，可以在项目根目录的package.json文件内找到相关的信息(部分片段)：

 {
  "dependencies": {
   "pinia": "^2.0.11",
   "vue": "^3.2.25"
  },
  "devDependencies": {
   "@vitejs/plugin-vue": "^2.2.0",
   "vite": "^2.8.0"
  }
 }

优化改造

因为需要在整个项目使用状态管理，因此需要在main.js文件里配置，以使它应用到整个应用(app)：

 // main.js
 import { createApp } from 'vue'
 import App from './App.vue'
 // 导入构造函数
 import { createPinia } from 'pinia'
 // 实例化 Pinia
 const pinia = createPinia()
 // 创建Vue应用实例app
 const app = createApp(App)
 // 应用以插件形式挂载Pinia实例
 app.use(pinia)
 app.mount('#app')

定义状态仓库

 // src/store/index.js
 // 引入仓库定义函数
 import { defineStore } from 'pinia'
 // 传入2个参数，定义仓库并导出
 // 第一个参数唯一不可重复，字符串类型，作为仓库ID以区分仓库
 // 第二个参数，以对象形式配置仓库的state,getters,actions
 // 配置 state getters actions
 export const mainStore = defineStore('main', {
   // state 类似组件的data选项，函数形式返回对象
   state: () => {
     return {
       msg: '程序视点',
       counter: 0
     }
   },
   getters: {},
   actions: {}
 })

类似vuex，单独一个文件定义状态仓库并导出 读取仓库内状态并改变 在需要使用状态的组件内需要先导入状态仓库：

 import { mainStore } from "../store/index.js";

再实例化仓库函数：

 const store = mainStore();

即可使用。举个栗子：

 <template>
   <button @click="handleClick">修改状态数据</button>
    <!-- 模板内不需要加.value -->
     <p>{{store.counter}}</p>
     <!-- 或者使用解构之后的 -->
     <p>{{counter}}</p>
 </template>
 
 <script setup>
 // 导入状态仓库
 import { mainStore } from "../store/index.js";
 // 使普通数据变响应式的函数  
 import { storeToRefs } from "pinia";
 // 实例化仓库
 const store = mainStore();
 // 解构并使数据具有响应式
 const { counter } = storeToRefs(store);
 
 // 点击 + 1;
 function handleClick() {
   // ref数据这里需要加.value访问
   counter.value++;
 }
 </script>

可以像下面这样直接修改 state,但一般不建议这么做。

store.counter += 1;

其他改变方式

通过 actions去修改 state

action 里可以直接通过 this 访问。

export const mainStore = defineStore('main', {
   // state 类似组件的data选项，函数形式返回对象
   state: () => {
     return {
       msg: '程序视点',
       counter: 0
     }
   },
   getters: {},
   actions: {
     updateCount(){
       this.counter += 1;
     }
   }
 })

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

$patch

前面介绍的是少量数据的变更，如果涉及数据比较多，则推荐使用仓库实例的方法，批量修改，虽然看起来和前面的几乎没有区别，但是会加快修改速度，对程序的性能有很大的好处。patch方法，批量修改，虽然看起来和前面的几乎没有区别，但是会加快修改速度，对程序的性能有很大的好处。patch传入一个对象，对象的属性就是各种状态。

// 导入状态仓库 import { mainStore } from "../store/index.js"; // 使普通数据变响应式的函数 import { storeToRefs } from "pinia"; // 实例化仓库 const store = mainStore(); // 解构并使数据具有响应式 const { msg,counter } = storeToRefs(store); // 点击 + 1;修改字符串 function handleClick() { store.$patch({ msg: "pinia good!", counter: counter.value + 1, }); } 函数形式 上面例子中的$patch也可以传入一个函数，函数参数为state状态： // 导入状态仓库 import { mainStore } from "../store/index.js"; // 使普通数据变响应式的函数 import { storeToRefs } from "pinia"; // 实例化仓库 const store = mainStore(); // 解构并使数据具有响应式 const { msg,counter } = storeToRefs(store); // 点击 + 1;修改字符串 function handleClick() { store.$patch((state) => { state.msg = "pinia good!"; state.counter++; }); }

创建 Store

新建 src/store 目录并在其下面创建 index.ts，引入Pinia，创建并导出 store。

// src/store/index.ts

import { createPinia } from 'pinia'

const store = createPinia()

export default store

在 main.ts 中引入并使用。

// src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)

State定义和使用

定义State

在 src/store 下面创建一个user.ts

//src/store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user', // id必填，且需要唯一
  state: () => {
    return {
      name: '张三'
    }
  }
})

获取state

<template>
  <div>{{ userStore.name }}</div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
</script>

也可以结合 computed 获取。

const name = computed(() => userStore.name)

state 也可以使用解构，但使用解构会使其失去响应式，这时候可以用 pinia 的 storeToRefs，它会对解构的数据处理起到响应式的效果。

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

修改 state

可以像下面这样直接修改 state,但一般不建议这么做。

userStore.name = '李四'

建议通过 actions 去修改 state，action 里可以直接通过 this 访问。

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '张三'
    }
  },
  actions: {
    updateName(name) {
      this.name = name
    }
  }
})

<script lang="ts" setup> import { useUserStore } from '@/store/user' const userStore = useUserStore() userStore.updateName('李四') </script>

Getters

类似vuex的计算属性，获取状态机中的数据，且可以加工后返回。

export const useUserStore = defineStore({
 id: 'user',
 state: () => {
   return {
     name: '张三'
   }
 },
 getters: {
   fullName: (state) => {
     return state.name + '丰'
   }
 }
})

userStore.fullName // 张三丰

Actions

异步 action

action 可以像写一个简单的函数一样支持 async/await 的语法，让你愉快的应付异步处理的场景。

export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      return data
    }
  }
})

action间相互调用

action 间的相互调用，直接用 this 访问即可。

 export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      this.setData(data) // 调用另一个 action 的方法
      return data
    },
    setData(data) {
      console.log(data)
    }
  }
})

在 action 里调用其他 store 里的 action 也比较简单，引入对应的 store 后即可访问其内部的方法了。

// src/store/user.ts

import { useAppStore } from './app'
export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      const appStore = useAppStore()
      appStore.setData(data) // 调用 app store 里的 action 方法
      return data
    }
  }
})

// src/store/app.ts export const useAppStore = defineStore({ id: 'app', actions: { setData(data) { console.log(data) } } })

数据持久化

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

安装

npm i pinia-plugin-persist --save

使用

// src/store/index.ts

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

接着在对应的 store 里开启 persist 即可。

export const useUserStore = defineStore({
  id: 'user',

  state: () => {
    return {
      name: '张三'
    }
  },
  
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key。

自定义 key

你也可以在 strategies 里自定义 key 值，并将存放位置由 sessionStorage 改为 localStorage。

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

持久化部分 state

默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。

state: () => {
  return {
    name: '张三',
    age: 18,
    gender: '男'
  }  
},

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}

上面我们只持久化 name 和 age，并将其改为localStorage, 而 gender 不会被持久化，如果其状态发送更改，页面刷新时将会丢失，重新回到初始状态，而 name 和 age 则不会。

以上就是关于 Pinia.js 用法的一些介绍，Pinia.js 的内容还远不止这些，更多内容及使用有待大家自己探索。

Pinia官方文档 https://pinia.vuejs.org/

写在最后

【程序视点】助力打工人减负，从来不是说说而已！

后续小二哥会继续详细分享更多实用的工具和功能。持续关注，这样就不会错过之后的精彩内容啦！~

如果这篇文章对你有帮助的话，别忘了【一键三连】支持下哦~

扫描二维码推送至手机访问。

版权声明：本文由ruisui88发布，如需转载请注明出处。

本文链接：http://www.ruisui88.com/post/874.html

标签: vite.js
分享给朋友：
返回列表

上一篇：接私活搞副业，这6个必备开源项目一定要收藏

下一篇：【实践】electron24+vite4+vue3构建桌面版程序

“VUE最新状态管理工具（vue状态管理工具有哪些）” 的相关文章

培训机构财务及缴费管理系统

学校收费软件是专门为学校财务量身打造的用于灵活性收取学生费用，智能化管理学生缴欠费信息的一款智能系统。1.灵活性全面的学生档案（学籍）信息化管理要计费，一定要有学生信息。所以就算是财务的收费软件，关于学生的档案资料（学籍）管理，同样是计费系统软件不可缺少的部分。档案资料属性，全面、灵活性、能自定义。...

Java教程:gitlab-使用入门

1 导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用，可以帮助大家在企业中能够自主搭建GitLab服务，并且可以GitLab中的组、权限、项目自主操作GitLab简介GitLab环境搭建GitLab基本使用（组、权限、用户、项目）2 GitLab简介GitLab是整个DevOps生命周期...

理解virt、res、shr之间的关系(linux系统篇)

前言想必在linux上写过程序的同学都有分析进程占用多少内存的经历，或者被问到这样的问题——你的程序在运行时占用了多少内存（物理内存）？通常我们可以通过top命令查看进程占用了多少内存。这里我们可以看到VIRT、RES和SHR三个重要的指标，他们分别代表什么意思呢？这是本文需要跟大家一起探讨的问题。...

抖音 Android 性能优化系列:启动优化实践

启动性能是 APP 使用体验的门面，启动过程耗时较长很可能使用户削减使用 APP 的兴趣，抖音通过对启动性能做劣化实验也验证了其对于业务指标有显著影响。抖音有数亿的日活，启动耗时几百毫秒的增长就可能带来成千上万用户的留存缩减，因此，启动性能的优化成为了抖音 Android 基础技术团队在体验优化方向...

再来一波黑科技工具，低调使用

静读天下静读天下是一个特别优秀的电子书阅读器。它上面有多个在线书库，像古登堡计划，很多种优秀的书杂志，都可以下载来阅读。它还能智能识别章节功能，还支持外置的语音阅读功能。它支持多种文本格式，比如说txt，pdf，epub，mobi等等。为了便于阅读它还有10 种配色方式，还有夜间模式。不过免费版有广...

《暗黑破坏神 2:重制版》PC 版 2.3 版本发布，支持英伟达 DLSS

IT之家 12 月 3 日消息，暴雪为《暗黑破坏神 2：重制版》PC 版发布了更新 2.3 版本，添加了“离线难度缩放”滑块（玩家可以在单人游戏时增加挑战和奖励的级别）、多项辅助功能和用户界面改进，以及英伟达 DLSS 支持。玩法改进：玩家现在可以在离线游戏的选项菜单中使用“游戏难度等级”，它提供与...

蜀ICP备2024111239号-14