vue3+ts+vite实现pinia

本篇文章主要从事3部分

1. 单个store下的文件进行使用
2. 模块下进行使用(pinia不像vuex那样使用模块化了 直接在store下定义ts文件即可)
3. pinia持久化使用

安装pinia : cnpm install pinia
安装持久化 cnpm install pinia-plugin-persistedstate

1.单文件: index.ts (先不要管user.ts)

index.ts

import { defineStore } from "pinia"; 
//定义接口限制state的类型
interface State {
  indexCount: number;
}
//const index = defineStore('index'{
//或者  id:'index'//  两种方式  这个name是store的唯一表示(自己定义名字)
const index = defineStore({
  id: "index", 
  state: (): State => {
    return {
      indexCount: 10,
    };
  },
  getters: {
    // double: (state): number => state.indexCount * 2,
    double(): number {
      return this.indexCount * 2;
    },
  },
  actions: {
    increment() {
      this.indexCount++;
      return this.indexCount;
    },
  },
});
 
  export default index;
 

vue文件进行使用

<template>
  <div></div>
</template>

<script setup lang="ts">
// 引入store导出的
  import indexStore from "@/store";
  //这个就是把解构store的数据进行响应式 不然修改的时候源数据不会进行实时的更新
  import { storeToRefs } from "pinia";
  const indedex = indexStore(); 
  //对象解构
 const { indexCount, double } = storeToRefs(indedex);
 console.log(indexCount.value, "主入口解构的state");
 console.log(double.value, "主入口解构的getters");
</script>

<style scoped></style>

2.模块下进行使用

user.ts

import { defineStore } from "pinia";
export interface UserState {
  username: string;
}
const user = defineStore({
  id: "user",
  state(): UserState {
    return {
      username: "zhuzhu",
    };
  },
  getters: {},
  actions: {},
});
export default user;

在index.js引入

import { defineStore } from "pinia";
//引入user
import user from "./user"; 
interface State {
  indexCount: number;
}
const index = defineStore({
  id: "index", //  两种方式
  state: (): State => {
    return {
      indexCount: 10,
    };
  },
  getters: {
    // double: (state): number => state.indexCount * 2,
    double(): number {
      return this.indexCount * 2;
    },
  },
  actions: {
    increment() {
      this.indexCount++;
      return this.indexCount;
    },
  },
});
 
// 导出 多文件
  export { index, user };

组件文件使用

<template>
  <div></div>
</template>

<script setup lang="ts">
// 模块
  import { index, user } from "@/store";
  import { storeToRefs } from "pinia";
  //解构出来state和getters
  const { indexCount, double } = storeToRefs(index()); 
   const { username } = storeToRefs(user());
  //解构action方法
  const { increment } = index();


  console.log(indexCount.value, "indexCount");
    console.log(double.value, "double");
  console.log(username.value, "username");

  //直接调用action的方法即可
  console.log(increment(), "increment");
</script>

<style scoped></style>

运行结果

main.js引入

import { createApp } from "vue";
import { createPinia } from "pinia"; 
import "./style.css";
import App from "./App.vue";
const  pinia=createPinia();
createApp(App).use(pinia).mount("#app");

3.pinia数据持久化

import { defineStore } from "pinia";
import user from "./user";
import type { UserState } from "./user";
interface State {
  indexCount: number;
}
const index = defineStore({
  id: "index", //  两种方式
  state: (): State => {
    return {
      indexCount: 10,
    };
  },
  getters: {
    // double: (state): number => state.indexCount * 2,
    double(): number {
      return this.indexCount * 2;
    },
  },
  actions: {
    increment() {
      this.indexCount++;
      return this.indexCount;
    },
  },
   // 所有数据持久化 存在localstore
    // persist: true,
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: "storekey", // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage, 
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ["indexCount"],
  },
});
/ 
// 导出 多文件
export { index, user };