vue3项目中使用pinia

vuex 4
pinia 小菠萝

vuex和之前vue2使用一致

1.import { createStore } from 'vuex' 引入文件不同

vue3组件setup写法vuex提供了hook
//组件中操作store
import { useStore } from 'vuex'
//提交mutations 进行修改
store.commit('increment'),
//dispatch 触发action 同步或者异步提交mutations
store.dispatch('asyncIncrement')

pinia

pinia 类似RTK

pinia优化vuex。

官网

https://pinia.vuejs.org/zh/

中文文档
https://pinia.web3doc.top/

Vue.js 状态管理库

类型安全、可扩展性以及模块化设计。甚至让你忘记正在使用的是一个状态库。

优点：

简介

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起，最初的原则仍然相同，但 Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。除了安装和 SSR 之外，两者的 API 都是相同的，并且这些文档针对 Vue 3，并在必要时提供有关 Vue 2 的注释，以便 Vue 2 和 Vue 3 用户可以阅读！

为什么使用pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({})

优点

dev-tools 支持
- 跟踪动作、突变的时间线
- Store 出现在使用它们的组件中
- time travel 和更容易的调试
热模块更换
- 在不重新加载页面的情况下修改您的 Store
- 在开发时保持任何现有状态
插件：使用插件扩展 Pinia 功能
为 JS 用户提供适当的 TypeScript 支持或 autocompletion
服务器端渲染支持

pinia 取消mutations操作，直接通过action可以同步或者异步更新state。 action

pinia中常用的三大核心：

state 定义数据源
action 用来修改state
getters类似计算属性进行计算

项目中使用pinia

安装

cnpm i --save-dev pinia
"pinia": "^2.0.34",

1.创建pinia
index.ts
//创建pinia
import { createPinia } from "pinia";

//创建pinia对象
const pinia = createPinia();

export default pinia;

2.将pinia关联到vue项目

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
//引入pinia
import pinia from "@/pinia/index";
//将路由关联到vue3 项目
createApp(App).use(pinia).mount("#app");

3.使用pinia 内置api 创建模块化状态管理
创建store使用api defineStore
参数1：id唯一标识 user
参数2：为当前模块的基本配置

参数2函数式写法
export const useCounterStore = defineStore('counter', () => {
//内部类似setUp写法
const count = ref(0)
function increment() {
count.value++
}

return { count, increment }
})

创建一个store

//使用pinia 创建一个user 模块进行状态管理
import { defineStore } from "pinia";

//创建store
let userStore = defineStore("user", {
state() {
return {
//定义数据源
token: "",
};
},
//执行修改状态
actions: {
saveToken(args: string) {
this.token = args;
},
},
//属性计算
getters: {},
});

export default userStore;

组件setup中使用pinia

<script setup lang="ts">
//引入对应的模块
import user from "@/pinia/module/userStore";
//执行获取store
let userStore = user();
</script>
<template>
<div>商铺综合收费--{
   
   { userStore.token }}</div>
</template>

//触发action修改state
userStore.saveToken("111")

浏览器配置dev-tools 调试器

现有的dev-tools包直接在浏览器扩展程序安装。