pinia 的使用

下载引入 pinia

npm install pinia

// main.ts  (vue3  )

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

创建 store>index.ts 文件

import { defineStore } from 'pinia'
// 主要的全局数据 main只是描述信息
export const useMainStore = defineStore('main', {
  // 静态数据
  state: () => {
    return {
      info: "pinia 可以使用",
      count: 10,
    }
  },
  // 相当于计算属性(有数据缓存)
  getters: {
    count10(state) {
      return state.count + 10
    },
    // 若使用this.count，则必须指明返回数据的类型
    count11(): number {
      return this.count + 11
    }
  },
  // actions即可以是同步函数也可以是异步函数
  actions: {
    changeState() {
      this.count += 10
      this.info = "actions修改数据"
    },
    changeStates(num: number) {
      this.count += num + 2
      this.info = "actions修改数据"
    }
  }
})

使用state 和 getters

<template>
  <h1>{{ mainStore.info }}---{{ mainStore.count }}</h1>
  <h1>{{ mainStore.count11 }}</h1>
</template>

<script lang="ts" setup>
import { useMainStore } from "../../store/index";
const mainStore = useMainStore();

</script>

使用 storeToRefs解构赋值

<template>
  <h2>{{ info }}---{{ count }}</h2>
  <h1>{{count11 }}</h1>
</template>

<script lang="ts" setup>
import { useMainStore } from "../../store/index";
import { storeToRefs } from "pinia";
const mainStore = useMainStore();

let { info, count,count11 } = storeToRefs(mainStore);

</script>

actions 的使用方式

<template>
  <h1>{{ mainStore.info }}---{{ mainStore.count }}</h1>
  <h2>{{ info }}---{{ count }}</h2>
  <h1>{{ mainStore.count11 }}{{count11}}</h1>
  <button @click="alertData">批量更新</button>
</template>

<script lang="ts" setup>
import { useMainStore } from "../../store/index";
import { storeToRefs } from "pinia";

const mainStore = useMainStore();

let { info, count } = storeToRefs(mainStore);

const alertData = () => {
  // 方式一：最简单的方法，如下
  // 解构后更改方式
  // count.value += 10;
  // 结构前更改方式
  // mainStore.count += 10;
  // 方式二：若要同时修改多个数据，建议使用$patch来实现批量更新，在内部做了优化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   info: "hello"
  // })
  // 方式三：更好的批量更新方法，通过$patch传递一个函数来实现，这里的state就是useMainStore容器中的state
  mainStore.$patch((state) => {
    state.count += 10;
    state.info = "pinia批量更新";
  });
  // 方式四：通过 actions 来修改数据
  // mainStore.changeState();
  // mainStore.changeStates(10);
};
</script>

标签：count,info,mainStore,vue3,state,pinia,使用,useMainStore
来源： https://blog.csdn.net/chengtiandi/article/details/123257373