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框架中能使用 这个很多框架的使用方式应该都是一样的 如果我上述的代码有问题 欢迎大家指正
