摘要：在VUE项目开发中，一些数据常常被多个组件频繁使用，为了管理和维护这些数据，就出现了状态管理模式。今天小二哥要给大家推荐的不是VueX，而是称为新一代的状态管理工具的Pinia.js。

大家好，欢迎来到程序视点！我是小二哥！

在VUE项目开发中，一些数据常常被多个组件频繁使用，为了管理和维护这些数据，就出现了状态管理模式。今天小二哥要给大家推荐的不是VueX，而是称为新一代的状态管理工具的Pinia.js。

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

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

完整的 typescript 的支持；

极其轻量，压缩后的体积只有1.6kb;

去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；

actions 支持同步和异步；

没有模块嵌套，只有 store 的概念，能够构建多个 store，store 之间可以自由使用，更好的代码分割；

关联 Vue Devtools 钩子，提供更好地开发体验；

首先确保使用的脚手架是vite// 安装vite npm init vite@latest

以上安装完成之后，可以在项目根目录的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.counter}}

{{counter}}

// 导入状态仓库

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

// 使普通数据变响应式的函数

import { storeToRefs } from "pinia";

// 实例化仓库

const store = mainStore;

// 解构并使数据具有响应式

const { counter } = storeToRefs(store);

// 点击 + 1;

function handleClick {

// ref数据这里需要加.value访问

counter.value++;

}

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

store.counter += 1;

export const mainStore = defineStore('main', {

// state 类似组件的data选项，函数形式返回对象

state: => {

return {

msg: '程序视点',

counter: 0

}

},

getters: {},

actions: {

updateCount{

this.counter += 1;

}

}

})

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

const store = mainStore;

userStore.updateCount;

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

修改状态数据

{{msg}}

{{counter}}

// 导入状态仓库

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状态：

修改状态数据

{{msg}}

{{counter}}

// 导入状态仓库

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++;

});

}

以上就是关于 Pinia.js 用法的一些介绍。关于Pinia.js的基础操作可以通过下方阅读原文查看。Pinia.js 的内容还远不止这些，更多内容及使用有待大家自己探索。

【程序视点】助力打工人减负，从来不是说说而已！后续小二哥会继续详细分享更多实用的工具和功能。持续关注，这样就不会错过之后的精彩内容啦！如果这篇文章对你有帮助的话，别忘了【点赞】【分享】支持下哦~

来源：百科技展示