Vue中怎么使用pinia？什么是pinia？

什么是pinia？为什么要使用 Pinia？本篇文章就来带大家了解一下pinia，通过示例介绍一下pinia的基本使用方法，希望对大家有所帮助！

什么是Pinia？
Pinia最初是在 2019 年 11 月左右重新设计使用 Composition API的 Vue Store 外观的实验。从那时起，最初的原则仍然相同，但 Pinia 适用于 Vue 2 和 Vue 3 ，并且不需要你使用组合 API。除了安装和SSR之外，两者的 API 都是相同的，并且这些文档针对 Vue 3 ，并在必要时提供有关 Vue 2 的注释，以便 Vue 2 和 Vue 3 用户可以阅读！【相关推荐：vue.js视频教程】

为什么要使用 Pinia？
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。ç 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，则会将您的应用程序暴露给安全漏洞。但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

开发工具支持

跟踪动作、突变的时间表
商店出现在使用它们的组件中
时间旅行和更容易的调试
热模块更换

在不重新加载页面的情况下修改您的商店
在开发时保持任何现有状态
插件：使用插件扩展 Pinia 功能

为 JS 用户提供适当的 TypeScript 支持或自动完成功能

服务器端渲染支持

基本示例
这就是使用 pinia 在 API 方面的样子（请务必查看入门以获取完整说明）。您首先创建一个商店：

// stores/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {

  state: () => {

    return { count: 0 }

  },

  // could also be defined as

  // state: () => ({ count: 0 })

  actions: {

    increment() {

      this.count++

    },

  },

})

然后在组件中使用它：

import { useCounterStore } from '@/stores/counter'

export default {

  setup() {

    const counter = useCounterStore()

    counter.count++

    // with autocompletion ✨

    counter.$patch({ count: counter.count + 1 })

    // or using an action instead

    counter.increment()

  },

}

你甚至可以使用一个函数（类似于一个组件setup()）来为更高级的用例定义一个 Store：

export const useCounterStore = defineStore('counter', () => {

  const count = ref(0)

  function increment() {

    count.value++

  }

  return { count, increment }

})

如果您仍然不熟悉setup()Composition API，请不要担心，Pinia 还支持一组类似的地图助手，例如 Vuex。您以相同的方式定义存储，但随后使用mapStores()、mapState()或mapActions()：

const useCounterStore = defineStore('counter', {

  state: () => ({ count: 0 }),

  getters: {

    double: (state) => state.count * 2,

相关文章阅读