zhangax2008
管理员
管理员
  • UID1
  • 粉丝0
  • 关注0
  • 发帖数37
阅读:1524回复:1

Vue3中使用Pinia详解

楼主#
更多 发布于:2024-05-29 17:00
目录
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
zhangax2008
管理员
管理员
  • UID1
  • 粉丝0
  • 关注0
  • 发帖数37
沙发#
发布于: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'
  1. 创建defineStore 对象,定义一个useMovieListStore用于接收defineStore创建的对象,并将其通过export default 导出
const useMovieListStore = defineStore('movie',{
  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'
  1. 创建useStore对象
const store = useStore('movie')
  1. 在需要获取状态的地方通过上面定义的store.getIsShow()获取状态
return {
   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>
游客


返回顶部