1.pinia 介绍
pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。
依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。
Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。
Pinia 的优点
- pinia 符合直觉，易于学习。
- pinia 是轻量级状态管理工具，大小只有1KB.
- pinia 模块化设计，方便拆分。
- pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可 以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。
- store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。
- 支持多个 store。
- 支持 Vue devtools、SSR、webpack 代码拆分。
2.pinia基本使用
①.安装pinia
npm i pinia
②. 全局app.ts 引入
import { createApp } from "vue";
import { createPinia } from "pinia";
import Taro from "@tarojs/taro";const App = createApp({mounted() {},onLaunch(option) {},onShow() {},onHide() {},
});
App.use(createPinia());
export default App;
此时我这个是新创建得的一个 createApp.ts文件 在app.ts中引入的
③.创建store文件
index.ts
import { createPinia } from "pinia";
const store = createPinia();export { store };export * from "./modules/user";
export * from "./modules/tabbar";
export * from "./modules/location";export default store;
modules 文件夹中都是 相关的store 模块
④.使用字段说明
拿user.ts store模块来说
import { defineStore } from "pinia";
import { setStorage, getStorage, clearStorage } from "../../utils/tools";
import { store } from "../index";export const useUserStore = defineStore("user", {state: () => ({Token: getStorage("TOKEN") || null,Userinfo: getStorage("userInfo") || null,fansInfo: getStorage("fansInfo") || {},fansId: getStorage("fansId") || null,buyer_nick: getStorage("buyer_nick") || null,xyToken: getStorage("xyToken") || null,}),getters: {},actions: {setToken(token: string) {this.Token = token;setStorage("TOKEN", token);},setFansId(id: string) {this.fansId = id;setStorage("fansId", id);},setFansInfo(info: object) {this.fansInfo = info;setStorage("fansInfo", info);},setUserinfo(userinfo: Object) {this.Userinfo = userinfo;setStorage("userInfo", userinfo);},loggout() {this.Token = "";this.Userinfo = "";clearStorage("TOKEN");clearStorage("userInfo");},async getUserinfo() {},},
});export function getUserStore() {return useUserStore(store);
}
都是一些state 数据状态 和action 操作函数
⑤.页面中使用
import { storeToRefs } from 'pinia'; //引入插件方法
import { useUserStore } from '../../store/index' //引入模块
const userStore = useUserStore() //模块实例化const { fansId, fansInfo } = storeToRefs(userStore) //state 状态//注意 此时的状态是ref 参数 需要.value状态中的函数使用：
userStore.setUserinfo(obj) //使用user.ts中的action 函数3.总结
我感觉比vuex 好使 自从使用了pinia 以后 没有看过vuex 了 我现在都是写vue3 而且我上面说的这种 并不是只有Taro框架中能使用 这个很多框架的使用方式应该都是一样的 如果我上述的代码有问题 欢迎大家指正
