Vue3推荐的替代Vuex的新一代状态管理工具：Pinia 配置教程

Pinia 官方网站：pinia.vuejs.org

一、安装Pinia

npm install pinia --save

二、配置Pinia

（默认项目都使用 TypeScript ，默认后缀都是.ts）
在 src 目录内新建一个 store 的目录，然后在此目录下新建一个 index.ts 文件，内容如下：

import { createPinia } from 'pinia'const store = createPinia()export default store

三、在项目中注册并启用Pinia

打开项目下的 “main.ts”，在里面追加pinia的内容：

import { createApp } from 'vue'
import App from './App.vue'
// 导入Pinia状态管理器
import store from './store/index'createApp(App).use(store).mount('#app')

四、创建一个State

在 src/store 目录下新建一个 user.ts 文件，内容如下：

import { defineStore } from 'pinia'export const userStore = defineStore('userInfo', {state: () => {return {userID: '10001',userName: '某同学',}},getters: {fullName: (state) => {return `${state.userName}(${state.userID})`},},// action 支持 async/await 的语法，可以自行添加使用// action 里的方法相互之间调用，直接用 this 访问即可actions: {updateUserName(name: string) {this.userName = name},},
})

五、在页面中使用这个Store

例如需要在 app.vue 这个页中使用，内容如下：

<template>{{ store.fullName }}<p><button @click="onChangeName()">改变Store里的名字</button></p>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import { userStore } from '@/store/user'const store = userStore()const onChangeName = (name) => {store.updateUserName(name ?? '李同学')
}onMounted(() => {onChangeName('张同学')
})</script><style scoped></style>

到此一个基础的store就已经完成，如果还需要结合Local Storage持久化存储数据，接着往下看

六、Pinia的数据持久化，使用插件（pinia-plugin-persist）

pinia plugin persist官方网站：pinia-plugin-persist

1、安装 pinia-plugin-persist

npm install pinia-plugin-persist --save

2、在 Pinia 中启用 pinia-plugin-persist

打开 src/store/index.ts ，修改内容如下：

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'const store = createPinia()
store.use(piniaPluginPersist)export default store

3、在一个state中使用localStorage存储数据

打开上面创建的 user.ts 文件，修改内容如下：

import { defineStore } from 'pinia'export const userStore = defineStore('userInfo', {state: () => {return {userID: '10001',userName: '某同学',}},getters: {fullName: (state) => {return `${state.userName}(${state.userID})`},},actions: {updateUserName(name: string) {this.userName = name},},// 开启数据缓存persist: {enabled: true,strategies: [{key: 'my_project', // key可以自己定义，不填的话默认就是这个store的IDstorage: localStorage, // storage可以填sessionStorage，localStoragepaths: ['userID', 'userName'] }, // paths是需要存储的字段，不填就是全部},],},
})

Vue3推荐的替代Vuex的新一代状态管理工具：Pinia 配置教程相关推荐

Vue新一代状态管理工具—Pinia—都2023年了，快学起来吧！
Pinia 基本介绍 Pinia 是 Vue.js 的轻量级状态管理库官方网站:https://pinia.vuejs.org/ 中文文档: https://pinia.web3doc.top/in ...
vue3状态管理工具 pinia的使用
vue3状态管理工具 pinia的使用 pinia 是一个轻量级的状态管理库,属于 vue3 生态圈新的成员之一,也可以把它看做 vuex5,同时支持 vue2 和 vue3,模块化的设计让它的结构十 ...
Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么
Pinia从了解到实际运用--彻底搞懂什么是Pinia 知识回调(不懂就看这儿!) 场景复现什么是pinia pinia相比vuex的优势为什么要使用pinia? 基本示例知识回调(不懂就看这儿 ...
vue3 状态管理工具 pinia 使用
1.安装pinia npm install pinia --save 2.创建 Store 新建一个 store 文件,创建 index.ts import { createPinia } from ...
Pinia 上手指南 -- 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？
目录一.简介二.入门 1.安装 2.何为 Store ? 3.何时使用 Store ? 三.基本使用 1.Store 2.State 定义 state 获取 state 重置 state 更换 s ...
VueX（Vue状态管理模式)
一.初识VueX 1.1 关于VueX VueX是适用于在Vue项目开发时使用的状态管理工具.试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护 ...
Mobx | 强大的状态管理工具 | 可以用Mobx来替代掉redux
来源简书电梯直达 https://www.jianshu.com/p/505d9d9fe36a Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情 ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
vue3状态管理模式 Pinia
状态管理库 Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态 1:安装与使用pinia 1.1 安装语法:npm install pinia 1.2 创建一个pinia(根存储)并将其 ...