pinia简单使用

qq_39664116

已于 2023-06-02 15:14:53 修改

阅读量299

点赞数

分类专栏： learn-notes 文章标签： vue.js javascript 前端

于 2023-05-25 14:15:59 首次发布

本文链接：https://blog.csdn.net/qq_39664116/article/details/130866203

版权

learn-notes 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.pinia.ts 定义

import { defineStore } from "pinia";
import { Names } from "./store-name";
import { ref, computed } from "vue";
import Dayjs from "dayjs";
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`)
//store-name.ts 
//export enum Names {
//   TEST = "test",
//   USER = "user"
// }
// 第一个参数是你的应用中 Store 的唯一 ID。
// defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。

// options API
export const useTestStore = defineStore(Names.TEST, {
  state: () => ({
    name: "多多",
    count: 1,
    time: [Dayjs(new Date()).format("YYYY-MM-DD")]
  }),
  getters: {
    // computed 修饰的一些值
    double: (state) => state.count * 2
  },
  actions: {
    // methods 同步异步 提交state
    increment() {
      this.count++;
    },
    changeTime(value: string[]) {
      this.time = value;
    }
  }
});


interface User {
  name: string;
  age: number;
}
// 异步获取时
const asyncData = () => {
  return new Promise<User>((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: "异步", age: 2000 });
    }, 2000);
  });
};


// setup
export const useUserStore = defineStore(Names.USER, () => {
  // setup中：ref等于state  computed等于getters methods等于actions
  const name = ref("图图");
  const age = ref(18);
  const userMsg = computed(() => {
    return `我叫${name.value}，我${age.value}岁了`;
  });
  const setUser = (user: User) => {
    !!user.name && (name.value = user.name);
    !!user.age && (age.value = user.age);
  };
  // 异步
  const asyncSetUser = async () => {
    const res = await asyncData();
    setUser(res);
  };
  return { name, age, userMsg, setUser, asyncSetUser };
});

2.使用

<div>USER:{{ name }} --- {{ age }} --- {{ userMsg }}</div>
  <div>
    TEST:
    <el-button type="primary" :icon="Edit" circle @click="test.increment" />
    count:{{ test.time }}{{ test.count }}double:{{ test.double }}
  </div>
    
import { useUserStore, useTestStore } from "@/store/pinia";
import { storeToRefs } from "pinia";
const user = useUserStore();
const test = useTestStore();
//pinia中，state相当于reactive不能直接解构，会失去响应性，pinia提供了 storeToRefs() 使其解构响应性不丢失
const { name, age,userMsg } = storeToRefs(user);