《Vue3 基础知识》Pinia 02 之 项目中从 Vuex 转 Pinia

本文主要是介绍《Vue3 基础知识》Pinia 02 之 项目中从 Vuex 转 Pinia，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vuex 转 Pinia

前言

想了解基础知识可移步《《Vue3 基础知识》Pinia 01 之 基础》

在 Vue3 项目中增 Pinia，且能与 Vuex4 同时使用。

安装

npm i pinia

文件目录

• 新建文件夹 stores，注意是复数 s。因为 Pinia 中每个模块都是一个 store；
• 文件 index.js 是 Pinia 初始化文件。其它文件是带 id 的单个 store；

# Pinia 目录结构，注意 ID 与文件名匹配
src
└── stores├── index.js          # 初始化 Pinia├── gmThemePro.js     # 'gmThemePro' id└── user.js           # 'user' id

初始化

src/stores/index.js 中初始化 Pinia

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

src/main.js 中注册，更多单页面应用在此；

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores' // 导入 /stores/index.js// 创建 Vue 实例
const app = createApp(App)// 注册，注意任何 useXxxStore 都得在此代码之后使用
app.use(pinia)

改造

以 src\store\modules\user.js 为例，改造为 src\stores\user.js

• 使用 defineStore 定义一个 store，且唯一 id 为 user。；
• state 转换为一个箭头函数；
• getter 中的第一个参数 state 删除，所有东西都可用 this 访问；
• actions 中的第一个参数 context 删除，所有东西都可用 this 访问；
• mutations 在 Pinia 中被弃用，可转为 action，将第一个参数 state 删除，所有东西都可用 this 访问；

import { defineStore } from 'pinia'// 常量名建议以 `use` 开头且以 `Store` 结尾
export const useUserStore = defineStore('user', {state: () => {return {avatar: '',name: '',isManager: false,adminIds: [], //后台管理权限}},actions: {// 登录login(obj) {// TODO},// 登出logout() {// TODO},// 设置用户信息，原 mutations 中的 SET_NAMEsetUserInfo( userName, isManager, userInfoRole) {// TODO},// 设置权限信息，原 mutations 中的 SET_PRIVILEGEsetPrivilege(obj) {this.adminIds = obj.privilegeExts}}
})

使用

• 代码第 3 行，先引入 sotre；
• 代码第 9 行，再初始化 sotre；
• 代码第 15,19 行，state/getters/actions 都可用 this.userStore 直接访问；

<script>
<!-- 第一步: 引入 --> 
import { useUserStore } from '@/stores/user'<!-- 第二步: 定义为计算属性 -->
export default {computed: {userStore() {return useUserStore();},},methods: {getUserName() {// 直接调属性 namereturn this.userStore.name;},logout() {// 直接调方法 logoutthis.userStore.logout();}}
</script>

这篇关于《Vue3 基础知识》Pinia 02 之 项目中从 Vuex 转 Pinia的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---