pinina使用

定义pinia存储容器 /stores/piniause-demo.js

/**
 * 定义并导出容器
 * 参数1：容器ID，必须唯一
 * 参数2：配置对象
 */
export const useDemoStore = defineStore('demo', {
  //state：类似组件data，用于存储数据供全局调用
  state: () => ({
    count: 100,
    name: 'Job',
    likes: ['a', 'b', 'c'],
  }),
  //getters:类似组件computed，用于封装计算属性，有缓存功能
  getters: {
    // newCount(state) {
    //   return state.count + 10; //可以使用state(ts里最好使用state以用于类型推断)
    // },
    newCount() {
      return this.count + 10; //也可以使用this
    },
  },
  //actions：类似组件methods，用于封装业务逻辑，修改state里的数据
  actions: {
    changeDatas(value1, value2, value3) {
      this.count = value1;
      this.name = value2;
      this.likes.push(value3);
    },
  },
});

使用pinia存储数据 /pages/piniause-demo.vue

<template>
  <div>{{ demoStore.count }}</div>
</template>

<script setup>
import { useDemoStore } from '~/stores/piniause-demo.js' //引入实例
import { storeToRefs } from 'pinia' //引入API

/* -----初始化实例----- */
const demoStore = useDemoStore()

/* -----获取数据----- */
console.log(demoStore.count) //直接获取

const { count, name } = storeToRefs(demoStore) //解构获取（响应式），注：直接const {count,name} = demoStore会丢失响应
console.log(count, name)

/* -----修改数据----- */
//方式1：单个直接修改（不推荐）
demoStore.count = 200

//方式2：简单的：$patch方法-直接批量修改（注：此方式经测试，赋空值时不生效，建议用方式3）
demoStore.$patch({
  count: 200,
  name: 'Jack',
  likes: [...demoStore.likes, 'd'],
})

//方式3：复杂一点的：$patch方法-函数批量修改
demoStore.$patch((state) => {
  state.count = 200
  state.name = 'Jack'
  state.likes.push('d')
})

//方式4：再复杂一点的：封装到actions里做处理
demoStore.changeDatas(200, 'Jack', 'd') //可以定义动态参数

/* -----getters计算属性----- */
console.log(demoStore.newCount)
</script>

<style lang="less" scoped></style>