vue3中使用pinia(大菠萝)状态管理仓库

在Vue 3中，状态管理是非常重要的一部分。而Pinia(大菠萝)作为一个全新的状态管理库，在Vue 3中提供了更好的状态管理方案，可以方便地实现任意组件之间数据共享。与VueX不同的是，Pinia并不依赖于Vue 3的响应式系统，而是通过手动订阅和派发事件的方式来实现状态管理。这样可以提高系统性能，减少数据冗余，同时使得代码更容易测试和维护。本文将介绍如何在Vue 3中使用Pinia状态管理仓库，并提供一些最佳实践来帮助您更好地使用它。

一、vue3中使用pinia

Pinia是一个Vue 3的状态管理库，提供了一个易于使用的API和可扩展性。下面是如何在Vue 3项目中使用Pinia的步骤：

1. 安装Pinia

在项目中使用npm或yarn安装Pinia：

npm install pinia

或

yarn add pinia

2. 创建和注册一个Pinia store

创建一个store并导出它，例如：

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

在项目中的任何组件中使用该store，只需导入并使用它：

import { useMyStore } from './store'

export default {
  setup() {
    const myStore = useMyStore()

    return {
      count: myStore.count,
      increment: myStore.increment,
    }
  },
}

3. 在Vue应用程序中安装Pinia

在Vue的createApp时，将Pinia安装为插件：

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

const app = createApp(App)

app.use(createPinia())

app.mount('#app')

现在，您可以在Vue应用程序中使用Pinia啦！

备注：由于Vue 3的Composition API的特性，您可以使用useXXX函数(例如 useMyStore())而不是传统的mapState、mapActions等选项来访问store中的状态和操作。

二、使用pinia实现任意组件之间数据共享

要在Vue 3项目中使用Pinia实现任意组件之间的数据共享，您可以按照以下步骤操作：

1. 创建一个名为user的Pinia store，例如：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
  }),
  actions: {
    setName(name) {
      this.name = name
    },
  },
})

2. 在Vue应用程序中注册Pinia store，您需要在入口文件中创建Pinia实例并将其注册到Vue应用程序中。例如：

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

const app = createApp(App)

app.use(createPinia())
app.provide('userStore', useUserStore())

app.mount('#app')

在上面的示例中，我们使用provide API将useUserStore()实例注册为名为’userStore’的全局可注入实例。

3. 在组件中使用Pinia store，您可以在任何Vue组件中使用创建的Pinia store。例如，在组件A和组件B中，您可以使用以下方式导入user store：

import { useUserStore } from '../store/user'

export default {
  setup() {
    const userStore = useUserStore()

    return {
      name: userStore.name,
      setName: userStore.setName,
    }
  },
}

在上面的示例中，我们使用useUserStore()函数从’./store/user.js’中导入我们的Pinia store，并在setup()函数中使用store的属性和操作。

4. 在组件A或组件B中更新user store中的状态，例如：

import { useUserStore } from '../store/user'

export default {
  setup() {
    const userStore = useUserStore()

    const handleNameChange = (name) => {
      userStore.setName(name)
    }

    return {
      name: userStore.name,
      handleNameChange,
    }
  },
}

在上面的示例中，我们导入’…/store/user.js’中的user store，并在组件A中使用setName()操作更改store中的状态。

5. 在组件B中读取user store中的状态，例如：

import { useUserStore } from '../store/user'

export default {
  setup() {
    const userStore = useUserStore()

    return {
      name: userStore.name,
    }
  },
}

在上面的示例中，我们导入’…/store/user.js’中的user store，并在组件B中使用store的name属性。

现在，您已经成功地在Vue 3项目中使用Pinia实现了任意组件之间的数据共享！

三、pinia中的getters

在Vue 3项目中，使用Pinia状态管理仓库，可以使用getter来获取存储状态，这是一个非常有用的特性。getter可以用于计算或转换存储的状态，并且能够更新UI或在其他地方使用。

以下是一个使用getter的示例：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    firstName: 'John',
    lastName: 'Doe',
  }),
  getters: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    },
  },
})

在上面的例子中，我们在user store中定义了一个getter函数fullName。getter函数返回由firstName和lastName组合成的完整名称。

现在，可以在组件中使用getter来获取完整名称，并将其显示在UI中，如下所示：

<template>
  <div>{{ fullName }}</div>
</template>

<script>
import { useUserStore } from '../store/user'

export default {
  setup() {
    const userStore = useUserStore()

    return {
      fullName: userStore.fullName,
    }
  },
}
</script>

在上述代码中，我们在组件中使用useUserStore钩子获取store实例，然后返回完整名称getter。最后，在模板中将fullName绑定到UI元素，以便在屏幕上显示完整名称。

通过使用getter，您可以轻松地计算和转换状态，并将其暴露给Vue组件中使用。在实际开发中，getter的应用场景非常广泛，比如处理复杂的计算逻辑，根据状态属性的值决定下一步要执行的操作等等。

四、pinia的组合式写法

在Vue 3项目中，除了可以使用Options API来定义Pinia状态管理仓库之外，还可以使用Composition API。下面是一个使用Composition API来定义和使用Pinia状态管理仓库的示例：

//定义组合式API仓库
import { defineStore } from "pinia";
import { ref, computed,watch} from 'vue';
//创建小仓库
let useTodoStore = defineStore('todo', () => {
    let todos = ref([{ id: 1, title: '吃饭' }, { id: 2, title: '睡觉' }, { id: 3, title: '打豆豆' }]);
    let arr = ref([1,2,3,4,5]);

    const total = computed(() => {
        return arr.value.reduce((prev, next) => {
            return prev + next;
        }, 0)
    })
    //务必要返回一个对象:属性与方法可以提供给组件使用
    return {
        todos,
        arr,
        total,
        updateTodo() {
            todos.value.push({ id: 4, title: '组合式API方法' });
        }
    }
});

export default useTodoStore;

上述代码中使用ref定义的todos 和 arr 就相当于选项式中的state中的数据；使用computed计算属性计算的total就相当于选项式中的getters中的属性；updateTodo方法就相当于写在选项式actions中的方法

五、pinia和vuex的对比

特性	Vuex (Vue2)	Pinia (Vue3)
数据存储	State 存储在 Store 中	State 存储在 Store 中
数据修改	commit/mutation	action
响应式	使用 Vue 响应式系统实现	使用 Vue 3 的响应式系统实现
数据获取	getters	getters
模块化	模块按照功能划分，每个模块有自己的 state、mutation、action 和 getter	模块按照功能划分，每个模块有自己的 state、action 和 getter
TypeScript 支持	需要额外安装 @vue/cli-plugin-typescript 插件，并在 store 中进行类型定义	内置 TypeScript 支持，使用起来更加方便
插件	支持插件（例如 logger 插件）	支持插件（例如 devtools 插件）
热重载	支持热重载	支持热重载

需要注意的是，Vue3 中的 Pinia 不仅支持 Vue2 中 Vuex 所有的功能，而且使用起来更加方便，对 TypeScript 的支持也更加友好。而且 Pinia 只依赖于 Vue3 的响应式系统，所以可以很容易地跨平台使用。

六、总结

综上所述，Pinia(大菠萝)是Vue 3中一个非常重要的状态管理库，它能够帮助我们更好地管理和共享组件中的数据。通过本文的介绍，您已经学会了如何在Vue 3中使用Pinia，以及一些最佳实践来帮助您更好地使用它。当然，这只是入门级别的介绍，并且Pinia仍然有很多特性和功能可以探索。如果您想深入学习更多关于Pinia的内容，建议您查阅官方文档。希望本文对您在Vue 3中使用Pinia提供了一些帮助，祝您在开发中愉快！