Pinia：新手入门指南

2023-10-26 15:47:34

引言

还在苦苦纠缠于传统的Vue状态管理库吗？是时候拥抱新时代了！欢迎来到Pinia的世界，一个让你轻松掌控状态的全新境界。这个教程将手把手带你领略Pinia的魅力，让你成为状态管理的大师！

什么是Pinia？

Pinia是一个轻量级且易于使用的Vue状态管理库，旨在提供高效、可扩展的状态管理解决方案。与Vuex不同，Pinia采用了Composition API，这使得状态管理更加模块化和响应式。

入门Pinia

安装

npm install pinia

创建商店

import { createPinia } from 'pinia'

const store = createPinia()

状态容器

状态容器是Pinia的核心概念，它是一个响应式的对象，包含着应用程序的状态。要定义状态，请使用 defineStore() 函数。

import { defineStore } from 'pinia'

const useStore = defineStore('store', {
  state: () => ({
    count: 0
  }),
  getters: {
    // 获取状态的派生值
    doubleCount: (state) => state.count * 2
  },
  actions: {
    // 提交状态变更
    increment() {
      this.count++
    }
  }
})

全局状态

全局状态可以通过 store.state 访问，它可在整个应用程序范围内使用。

局部状态

局部状态是特定于组件的，可以通过 this.$pinia.store.state 访问。

getters

getters 是计算状态的派生值。它们可以访问状态并返回一个新的值。

actions

actions 提交状态变更。它们可以接受参数并使用 this 访问状态。

实战

以下是如何使用 Pinia 构建一个简单的计数器应用程序：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useStore } from './store'

export default defineComponent({
  setup() {
    const store = useStore()

    return {
      count: computed(() => store.state.count),
      increment: () => store.actions.increment()
    }
  }
})
</script>