vue3 中使用pinia 数据状态管理(在Taro 京东移动端框架中的使用)

1.pinia 介绍

pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。
依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。
Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。

Pinia 的优点

1. pinia 符合直觉，易于学习。
2. pinia 是轻量级状态管理工具，大小只有1KB.
3. pinia 模块化设计，方便拆分。
4. pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可 以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。
5. store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。
6. 支持多个 store。
7. 支持 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框架中能使用 这个很多框架的使用方式应该都是一样的  如果我上述的代码有问题 欢迎大家指正