【vue 引入pinia与pinia的详细使用】

Pinia 是一个用于 Vue 3 的状态管理库，其设计目标是提供一个简单、一致的 API 和强类型支持。下面介绍如何引入 Pinia 并使用它。

安装

npm install pinia

引入

在 main.js 中引入 Pinia：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)

const pinia = createPinia()
app.use(pinia)

app.mount('#app')

这里我们用 createPinia 方法创建了一个新的 Pinia 实例，并通过 app.use 方法将其注册到 Vue 应用实例中。

使用

定义 store

在 Pinia 中，我们通过 defineStore 方法来定义一个 store：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
  },
})

在这个例子中，我们定义了一个名为 useCounterStore 的 store，其中包含一个状态属性 count 和两个 action 方法 increment 和 decrement。

在组件中使用 store

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

<script>
import { useCounterStore } from './store'

export default {
  setup() {
    const counter = useCounterStore()

    function increment() {
      counter.increment()
    }

    function decrement() {
      counter.decrement()
    }

    return {
      counter,
      increment,
      decrement,
    }
  },
}
</script>

在组件中，我们通过 useCounterStore() 方法获取 useCounterStore 的实例，并通过它来访问状态属性和 action 方法。

在插件中使用 store

如果你需要在插件中使用 store，那么可以通过 useStore 方法来获取 store 实例：

import { useCounterStore } from './store'

export default {
  install(app, options) {
    app.provide('counterStore', useCounterStore())
    // ...
  }
}

在这个例子中，我们将 useCounterStore() 的返回值提供给了 Vue 的 provide 方法，以便在插件中进行访问。

配置 store

defineStore 方法还支持可选的 actions、getters 和 mutations 配置项，以支持更加灵活的状态管理模式。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({ count: 0 }),
  getters: {
    doubleCount() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
  },
  mutations: {
    reset() {
      this.count = 0
    },
  },
})

在这个例子中，我们定义了一个名为 doubleCount 的 getter 和一个名为 reset 的 mutation 方法。Getter 可以用于派生计算属性，Mutation 可以用于同步修改状态。

总结

以上就是如何引入和使用 Pinia 的详细介绍。相比 Vuex 和其他类似的状态管理库，Pinia 更加轻量化且易于使用，适合中小型 Vue 项目的状态管理。