pinia学习

piniaPluginPersist插件做pinia持久化

// 首先
npm install pinia-plugin-persistedstate 
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia()
const persist = createPersistedState()
pinia.use(persist)
app.use(pinia)

pinia和vuex的优势：
1、pinia里面只有state、getter、action，放弃了Mutation，并且action支持同步异步
2、每个store都是独立的，相互不影响
3、体积非常小，压缩后只有1KB左右
4、良好的TS支持
5、支持服务端渲染

使用注册pinia

// 下载 pnpm install pinia
// 在main.ts中 引入pinia 
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

// 创建 src/store/user.ts
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
  state: () => ({
    name: "zhangsan",
    age: 18,
    sex: "男",
  }),
  // 开启pinia持久化
  persist: true
})

// 使用
import { useUsersStore } from './store/user.ts'
const store = useUsersStore()
// 取值：store.name 或者 store.$state.name   (非响应式)
const { name, age, sex } = store
// 注意 name, age, sex 值非响应式 可以通过 storeToRefs(store) 或者 toRefs(store) 转成页面响应式（具体看总结）

// 响应式的两种写法
import { storeToRefs } from 'pinia'
const { name, age, sex } = storeToRefs(store)
// 或
import { toRefs } from 'vue'
const { name, age, sex } = toRefs(store)

store.$reset() // 还原store，恢复到store默认值

// 批量修改store  也是非全局的修改，只在当前页面生效。 和上述使用同理
store.$patch(state => {
  state.name = 'lisi';
  state.age = 20;
})

// 替换整个state 也是非全局的修改，只在当前页面生效。 和上述使用同理
store.$state = {
  name: "lisi",
  age: 20,
  sex: "女",
};

getters属性：
getters是defineStore参数配置项里面的另一个属性，是一个对象，对象的属性可以直接页面上引用（store.getAddAge）。
可以把getter想象成Vue中的计算属性，它的作用就是返回一个新的结果。既然它和Vue中的计算属性类似，那么它肯定也是会被缓存的，就和computed一样。
当age发生变化时，getAddAge属性会重新计算。

在其中一个getters中调用另一个getters(注意getAddAge和getNameAndAge的写法，稍有不同)：
getNameAndAge：通过this访问其他getters,this指向的是store实例，能访问到getAddAge

getters传参：
在页面中使用：store.getAgeTotal(100)
如果接受参数，则不能访问其他getters

export const useUserStore = defineStore("users", {
  state: () => {
    return {
      name: "",
      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    getNameAndAge(): string {
      return this.name  + this.getAddAge; // 调用其它getter
    },
    getAgeTotal:(state) => {
      return (num:number) => num + state.age
    }
  },
});

actions属性：
actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法。
特殊之处在于该方法内部的this指向的是当前store
调用：store.saveName('list')

export const useUserStore = defineStore("users", {
  state: () => {
    return {
      name: "",
      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    getNameAndAge(): string {
      return this.name  + this.getAddAge; // 调用其它getter
    },
    getAgeTotal:(state) => {
      return (num:number) => num + state.age
    }
  },
  actions: {
    saveName(name: string) {
      this.name = name;
    },
  },
});

如何引用另外模块的store
在user.ts中引用login.ts中store

// src/store/login.ts 文件

import { defineStore } from "pinia";
export const loginStore = defineStore("login_store", {
  state: () => ({
    name: "admin",
    pwd: "123456",
    token:
      "dasdjlkjqjdljadsanklqjlkdasbnfamsnmnxzcmhyaweheqwjjwewqhehqwgdgadjhagsdjas",
  }),
});

// src/store/user.ts 文件

import { defineStore } from "pinia";
import { loginStore } from "./login";
export const useUserStore = defineStore("users", {
  state: () => {
    return {
      name: "zhangsan",
      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
    getAgeTotal: (state) => {
      return (num: number) => state.age + num;
    },
  },
  actions: {
    saveName(name: string) {
      // 拿到loginStore的实例，然后取state
      const login_store = loginStore();
      console.log(login_store.$state);
      this.name = name;
    },
  },
});

// 总结
如父子组件都用到了同一个store，在父组件中修改store，子组件未展示最新的store，原因是由于子组件未使用toRefs或者storeToRefs转为响应式。其他模块都是取最新的store
若在actions中使用异步，也是使用promise或者async和await获取异步结果，在将结果存在store中