VUE | 最新状态管理工具
大家好，我是前端实验室的大师兄!
前言
在VUE项目开发中，一些数据常常被多个组件频繁使用，为了管理和维护这些数据，就出现了状态管理模式。
今天大师兄要给大家推荐的不是VueX，而是称为新一代的状态管理工具的Pinia.js。
关于Pinia.js
Pinia.js 由 Vue.js团队成员所开发的，是新一代的 Vuex，即 Vuex5.x，在 Vue3.0 项目的使用中备受推崇。
它已经加入官方团队了哦！
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();
即可使用啦！
Store中State读取和修改
storeToRefs响应式函数
<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传入一个对象，对象的属性就是各种状态。
<template>
<button @click="handleClick">修改状态数据</button>
<p>{{msg}}</p>
<!-- 或者使用解构之后的 -->
<p>{{counter}}</p>
</template>
<script setup>
// 导入状态仓库
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,
});
}
</script>
函数形式
上面例子中的$patch也可以传入一个函数，函数参数为state状态：
<template>
<button @click="handleClick">修改状态数据</button>
<p>{{msg}}</p>
<!-- 或者使用解构之后的 -->
<p>{{counter}}</p>
</template>
<script setup>
// 导入状态仓库
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++;
});
}
</script>
以上就是关于 Pinia.js 用法的一些介绍。关于Pinia.js的基础操作可以通过下方阅读原文查看。Pinia.js 的内容还远不止这些，更多内容及使用有待大家自己探索。
Pinia官方文档 https://pinia.vuejs.org/
写在最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
腾讯云开发者
