|
阅读：1679回复：1
Vue3中使用Pinia详解
目录
Pinia介绍 安装和配置Pinia Pinia的核心 Store State Getter Action 创建和使用Pinia 创建Pinia 使用Pinia Pinia的Option Store方式定义 Store Pinia的Setup Store方式定义 Store 示例代码 ———————————————— Pinia介绍 Pinia是一个专门为Vue.js设计的状态管理库，它提供了一种简单和直观的方式来管理应用程序的状态。在使用Pinia时，可以轻松地创建定义状态的存储，然后将其与Vue组件绑定，使它们能够使用该状态。和上一个博客提到的Vuex相比，Pinia 更加简单易用，体积更小，同时具有更好的 TypeScript 支持和插件系统。 在Vue.js的官网中，我们可以看到Pinia目前已经取代Vuex,成为Vue生态系统的一部分。 安装和配置Pinia 安装和配置Pinia非常简单，像其他Vue插件一样，Pinia需要通过yarn或npm进行安装并且与Vue应用程序进行绑定，可以使用以下命令进行安装： yarn add pinia # 或者使用 npm npm install pinia 在安装完Pinia包之后，需要在main.ts文件中导入createPinia函数并将Pinia插件与Vue应用程序绑定，如下所示： import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); app.mount('#app'); 使用 createPinia() 函数创建并初始化Pinia插件实例，将其与Vue应用程序绑定使用app.use(pinia)。至此，我们就可以使用Pinia来管理Vue应用程序的状态了。 Pinia的核心 Store Store是 Pinia 中管理状态的核心概念。它相当于一个 Vue 组件中的状态，但是 Store是一个独立的模块。 Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字，这个名字 ，也被用作 id ，是必须传入的， Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法，将返回的函数命名为 use… 是一个符合组合式函数风格的约定。 defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。 定义Store的示例代码： import { defineStore } from 'pinia' // 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`) // 第一个参数是你的应用中 Store 的唯一 ID。 export const useAlertsStore = defineStore('alerts', { // 其他配置... }) State State 是 store 中存储数据的地方。通过定义 State，可以在 store 的任何位置访问和修改数据。 在 Pinia 中，state 被定义为一个返回初始状态的函数。这使得 Pinia 可以同时支持服务端和客户端。 定义State的示例代码如下： import { defineStore } from 'pinia' const useStore = defineStore('storeId', { // 为了完整类型推理，推荐使用箭头函数 state: () => { return { // 所有这些属性都将自动推断出它们的类型 count: 0, name: 'Eduardo', isAdmin: true, items: [], hasChanged: true, } }, }) Getter Getter 用来获取从 state 派生的数据，类似于 Vue 组件中的 computed 计算属性。可以通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数，并且它将接收 state 作为第一个参数： export const useStore = defineStore('main', { state: () => ({ count: 0, }), getters: { doubleCount: (state) => state.count * 2, }, }) Action Action 相当于组件中的 方法。它们可以通过 defineStore() 中的 actions 属性来定义；Action 是一种将异步操作封装在 store中的方式，它是一个可以被调用的函数，也可以接收参数并修改 store 中的状态。 Action应该始终是同步的，并返回一个 Promise 对象，以便在处理异步操作时能够很好地处理结果。 Pinia 中的 Action 由 defineStore 创建，可以通过在 actions 中定义它们来使用它们。例如，下面是一个 store 中的 Action 定义： import { defineStore } from 'pinia' export const myStore = defineStore('myStore',{ state: () => ({ message: 'Hello', }), actions: { async fetchMessage() { const response = await fetch('http://127.0.0.1:5173/message') const data = await response.json() this.message = data.message }, }, }) 在上面的示例中，我们为 myStore 定义了一个 Action ， fetchMessage() ，它会从后台 API 中获取数据，并更新 store 中的状态。然后，我们可以从组件或其他 Action 中调用该 Action : import { useStore } from 'pinia' export default { setup() { const store = useStore('myStore') function handleClick() { store.fetchMessage() } return { handleClick, } }, } 在上面的代码中，我们在组件中使用 useStore 钩子来获取 store 实例，然后将其传递给 fetchMessage() 方法。该方法将从应用程序的后台获取数据，并更新存储器中的状态。最后，公开了一个 handleClick() 方法，以便组件可以调用它并触发 Action 。 ———————————————— 原文链接：https://blog.csdn.net/w137160164/article/details/131160122 |
|
|
沙发#
发布于：2024-05-29 22:39
创建和使用Pinia
创建Pinia 前面我们已经安装和配置好了Pinia,在创建Pinia之前，为了代码的统一管理和可维护性，我们依然先创建一个store文件夹，然后在来创建相关的Pinia，具体步骤如下 1 在src文件夹下新建store文件夹，后面所有涉及需要Pinia进行状态管理的代码都放在该文件夹下 2 在store文件夹下新建movieListStore.js文件，创建完成后，打开该文件 3 在movieListStore.js文件中引入Pinia中的defineStore 方法 import { defineStore } from 'pinia'
state: () => ({ isShow: true, movies: [], }), getters: { getIsShow() { return this.isShow }, getMovies() { return this.movies }, }, actions: { setIsShow(value) { this.isShow = value }, async fetchMovies() { const response = await fetch('https://api.movies.com/movies') const data = await response.json() this.movies = data }, }, }) export default useMovieListStore 在上面的代码中，我们使用action定义了两个方法，一个同步方法setIsShow， 一个异步方法 fetchMovies 注意： 这里需要注意，官方建议我们在定义钩子函数时，建议使用use开头Store结尾的命名方式来对上面创建的对象进行命名，如上面的useMovieListStore 使用Pinia 前面我们已经创建好了Pinia，接下来，我们就可以在组件中使用了。 在Vue组件中使用store，我们需要通过 useStore() 函数访问store的实例。 在Vue组件中使用Pinia的步骤如下 1.先使用 import 引入Pinia 中的 useStore import { useStore } from 'pinia'
isShow: store.getIsShow(), } Menu.vue中完整的示例代码如下： <template> <nav> <ul> <li v-show="isShow">pw_ $route.name </li> <li><router-link to="/">Home</router-link></li> <li><router-link to="/movies">Movies</router-link></li> </ul> </nav> </template> <script> import { defineComponent } from 'vue' import { useStore } from 'pinia' export default defineComponent({ name: 'Menu', setup() { const store = useStore('movie') return { isShow: store.getIsShow() } }, }) </script> |
|
