Pinia 是什么?

Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3

常见问题

关于该项目和可能问题的几点说明:

问:这是否取代了Vuex,是它的继任者吗?

答:不,或者至少这不是主要意图

问:动态模块呢?

答:动态模块不是安全的类型,因此我们允许创建不同的商店,可以在任何地方导入

Pinia 优势

符合直觉,易于学习
极轻, 仅有 1 KB
模块化设计,便于拆分状态

安装 Pinia

yarn add pinia@next
# or with npm
npm install pinia@next

用法

创建一个 pinia(根存储)并将其传递给应用程序:

import { createPinia } from 'pinia';

app.use(createPinia());

核心概念与基本使用

Store
Store 是一个保存状态和业务逻辑的实体,可以自由读取和写入,并通过导入后在 setup 中使用
创建一个 store

// store.js
import { defineStore } from "pinia";
interface MainState {
  counter: number
  name: string
}
export const useMainStore = defineStore({
  // id: 必须的,在所有 Store 中唯一
  id: "main",
  // a function that returns a fresh state
  state: () => MainState ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  getters: {
    doubleCount() {
      return this.counter * 2
    },
    // use getters in other getters
    doubleCountPlusOne() {
      return this.doubleCount * 2 + 1
    },
  },
  // optional actions
  actions: {
    reset() {
      // `this` is the store instance
      this.counter = 0
    },
  },
})

使用 Store

// xxx.vue
<template>
  <div>
    {{store.count}}
  </div>
</template>
<script>
// 导入 Store, 使用自己的路径
import { useMainStore } from '@/stores/main'

export default defineComponent({
  setup() {
    // 调用函数 获得Store
    const store = useMainStore()

    return {
      // gives access to the whole store
      store,
      // gives access only to specific state
      state: computed(() => store.counter),
      // gives access to specific getter; like `computed` properties
      doubleCount: computed(() => store.doubleCount),
    }
  },
})
</script>

标签: none

仅有一条评论

  1. dsa dsa

    test

添加新评论