vue3 pinia简单使用

参考：https://zhuanlan.zhihu.com/p/533233367

main.ts

import { createPinia } from "pinia";
app.use(createPinia())

 添加  src/store/user.ts

import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
  // 其它配置项
})

使用

import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
console.log(store);

store的具体数据存放在options的state属性内
添加（state接收的是一个箭头函数返回的值，它不能直接接收一个对象）

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小猪课堂",
      age: 25,
      sex: "男",
    };
  },
});

使用

import { ref } from "vue";
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
const name = ref<string>(store.name);
const age = ref<number>(store.age);
const sex = ref<string>(store.sex);
或者
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
const { name, age, sex } = store;

更改state

store.name = "张三";

响应式更改state

import { useUsersStore } from "../src/store/user";
import { storeToRefs } from 'pinia';
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);
const changeName = () => {
  store.name = "小猪课堂";
};

重置state数据到最开始的值，初始化

store.$reset();

批量更改数据

全部替换
const patchStore = () => {
  store.$patch({
    name: "张三",
    age: 100,
    sex: "女",
  });
};
替换部分
store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

直接替换这个state

store.$state = { counter: 666, name: '张三' }

options的getter属性
相当于vue的计算属性

添加
export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小猪课堂",
      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
  },
});
使用
<template>
  <p>新年龄：{{ store.getAddAge }}</p>
</template>
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();

getter中调用其他getter

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小猪课堂",
      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },
});

getter传参

getAddAge: (state) => {
   return (num: number) => state.age + num;
},
使用
<p>新年龄：{{ store.getAddAge(1100) }}</p>

options的actions属性

处理复杂逻辑代码

添加
actions: {
  saveName(name: string) {
    this.name = name;
  },
},
使用
const saveName = () => {
  store.saveName("我是小猪");
};