pinia的使用总结

Pinia 的优点： 1. 更加轻量级：相比 Vuex，Pinia 更加轻量级，因为它不需要使用 Vuex 的一些复杂的概念，如模块和 getter。 2. 更加简单易用：Pinia 的 API 设计更加简单易用，因为它使用了 Vue.js 3 的新特性，如 Composition API。 3. 更加灵活：Pinia 提供了更加灵活的状态管理方式，因为它支持多个 store 实例，而 Vuex 只支持一个 store 实例。

Vuex 的优点： 1. 更加成熟：Vuex 是一个比较成熟的状态管理库，它已经被广泛使用和测试。 2. 更加稳定：Vuex 的稳定性也比 Pinia 更高，因为它已经经过了多个版本的迭代和改进。 3. 更加强

大：Vuex 提供了一些高级功能，如中间件和插件，使得它可以处理更加复杂的状态管理需求。

yarn add pinia
# 或者使用 npm
npm install pinia

// 导入pinia
import { createPinia } from "pinia";
const pinia = createPinia();

// 挂载
createApp(App).use(router).use(ElementPlus).use(pinia).mount('#app')

首先在项目src目录下新建store文件夹，用来存放我们创建的各种store，然后在该目录下新建user.ts文件，主要用来存放与user相关的store。还可以新建其他文件作为小仓库，

定义store仓库：

//src/store/user.ts
import { defineStore } from 'pinia'

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

import { defineStore } from 'pinia'

export const todos = defineStore('todos', {
  state: () => ({
    /** @type {
   
   { text: string, id: number, isFinished: boolean }[]} */
    todos: [],
    /** @type {'all' | 'finished' | 'unfinished'} */
    filter: 'all',
    // type will be automatically inferred to number
    nextId: 0,
  }),
  getters: {
    finishedTodos(state) {
      // autocompletion! ✨
      return state.todos.filter((todo) => todo.isFinished)
    },
    unfinishedTodos(state) {
      return state.todos.filter((todo) => !todo.isFinished)
    },
    /**
     * @returns {
   
   { text: string, id: number, isFinished: boolean }[]}
     */
    filteredTodos(state) {
      if (this.filter === 'finished') {
        // call other getters with autocompletion ✨
        return this.finishedTodos
      } else if (this.filter === 'unfinished') {
        return this.unfinishedTodos
      }
      return this.todos
    },
  },
  actions: {
    // any amount of arguments, return a promise or not
    addTodo(text) {
      // you can directly mutate the stat 00e
      this.todos.push({ text, id: this.nextId++, isFinished: false })
    },
  },
})
————————————————
版权声明：本文为CSDN博主「而又何羡乎」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44285092/article/details/122627683

组件中仓库得使用


<template>
  <h1>{
   
   { mainStore.count }}</h1>
  <h1>{
   
   { mainStore.info }}</h1>
  <hr />
  <h1>{
   
   { count }}</h1>
  <h1>{
   
   { info }}</h1>
  <p>
    <button @click="alertData">修改数据</button>
  </p>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from "../store";
const mainStore = useMainStore();
// 解构数据，但是得到的数据是不具有响应式的，只是一次性的
// 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法：
// 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用
const { count, info } = storeToRefs(mainStore);
const alertData = () => {
  mainStore.count += 10
}
</script>

<style>
</style>

通过actions修改

// store/index.ts
// 类似于vue2组件的methods，用于封装业务逻辑，修改state
// // 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this
    actions:{
        changeState (){
            this.count += 10
            this.info = "actions修改数据"
        },
        changeStates (num:number){
            this.count += num + 2
            this.info = "actions修改数据"
        }
    }

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)
}

getter得使用

// 类似于组件的computed，用来封装计算属性，具有缓存的功能
    getters:{
    	 // 函数接收一个可选参数：state状态对象
        count10(state){
            return state.count += 10
        },
        count10(state){
            return this.count += 10
        },
        // 若使用this.count，则必须指明返回数据的类型
        count11():number{
            return this.count += 11
        }
    },

猜你喜欢