UNIAPP 使用 Pinia

安装

如果使用 HbuilderX 不需要手动安装可以直接使用

在终端中运行以下命令：

npm install pinia

我这里pinia的版本是"^2.1.7"

main.js 中 引用 pinia

import App from "./App";

// #ifndef VUE3
import Vue from "vue";
import "./uni.promisify.adaptor";
Vue.config.productionTip = false;
App.mpType = "app";
const app = new Vue({
  ...App,
});
app.$mount();
// #endif

// #ifdef VUE3
import { createSSRApp } from "vue";
//导入pinia  新增加的 特别注意引用位置
import * as Pinia from "pinia";

export function createApp() {
  const app = createSSRApp(App);
  app.use(Pinia.createPinia()); // 新增加的
  return {
    app,
    Pinia, //新增加的
  };
}
// #endif

在项目的根目录创建 store 文件夹

编写 index.js 文件

import { defineStore } from "pinia";

export const useStore = defineStore("main", {
  state: () => {
    return {
      // 所有这些属性都将自动推断其数据类型
      language: "zh",
      login: false,
      user_token: "",
      user_name: "微信用户",
      user_avatar: "",
      articleId: "",
      storeId: "",
    };
  },

  getters: {},
  actions: {
    // 设置token
    setToken(token) {
      console.log(token);
      this.user_token = token;
    },
    // 设置用户名
    setUserName(name) {
      this.user_name = name;
    },
  },
});

模块化

在 store 文件夹下面创建 modules 文件夹

新建 count.js 文件

import { defineStore } from "pinia";

export const useCountStore = defineStore("count", {
  state: () => {
    return {
      // 所有这些属性都将自动推断其数据类型
      count: 0,
    };
  },
  getters: {},
  actions: {
    setCount() {
      this.count++;
    },
  },
});

页面上使用

<template>
  <view>{{ message }}</view>
  <view @click="handleclick">点击我传递参数</view>
  <text>{{ Store.user_token }}</text>
  <text>{{ Store.user_name }}</text>
  <text>{{ CountStore.count }}</text>
</template>

<script setup>
  import { useStore } from "@/store/index.js";

  import { useCountStore } from "@/store/modules/count.js";

  import { ref } from "vue";

  const message = ref("头部信息");

  const Store = useStore();

  const CountStore = useCountStore();

  const handleclick = (e) => {
    console.log(e);
    Store.setToken("123456");
    Store.setUserName("张三");
    CountStore.setCount();
  };
</script>

持久化

持久化 就是刷新页面,页面的数据不会丢失

安装

npm i pinia-plugin-persist-uni

main.js 配置

import App from "./App";

// #ifndef VUE3

import Vue from "vue";

import "./uni.promisify.adaptor";

Vue.config.productionTip = false;

App.mpType = "app";

const app = new Vue({
  ...App,
});

app.$mount();

// #endif

// #ifdef VUE3
import { createSSRApp } from "vue";
//导入pinia
import { createPinia } from "pinia";

import persist from "pinia-plugin-persist-uni";

const pinia = createPinia();

pinia.use(persist);

export function createApp() {
  const app = createSSRApp(App);

  app.use(pinia);

  return {
    app,
  };
}
// #endif

然后再 store 中使用

import { defineStore } from "pinia";

export const useCountStore = defineStore("count", {
  state: () => {
    return {
      // 所有这些属性都将自动推断其数据类型
      count: 0,
    };
  },

  getters: {},
  actions: {
    // 切换语言
    // 设置商店id
    setCount() {
      this.count++;
    },
  },
  // 开启数据持久化,必须要加入的
  persist: {
    enabled: true,
  },
});