首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 pinia状态管理仓库

vue3中使用pinia(大菠萝)状态管理仓库的项目实践

2023-07-26 10:29:16 作者：jieyucx

本文主要介绍了vue3中使用pinia(大菠萝)状态管理仓库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

一、vue3中使用pinia

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

安装Pinia

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

npm install pinia

或

yarn add pinia

创建和注册一个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,
    }
  },
}

在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实现任意组件之间的数据共享，您可以按照以下步骤操作：

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

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

在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’的全局可注入实例。

在组件中使用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的属性和操作。

在组件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中的状态。

在组件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的对比

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

特性	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 插件）
热重载	支持热重载	支持热重载

六、总结

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

到此这篇关于vue3中使用pinia(大菠萝)状态管理仓库的文章就介绍到这了,更多相关vue3 pinia状态管理仓库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！