Vue状态管理–Pinia使用详解-电脑学习网

一、Pinia概述

Pinia开始于大概2019年，最初作为一个实验为Vue重新设计状态管理，让它用起来像组合API。

Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）。

Pinia（发音为/piːnjʌ/，如英语中的peenya）是最接近piña（西班牙语中的菠萝）的词。

这可能也是Pinia的图标是一个菠萝的原因。

二、Pinia和Vuex的区别

Pinia最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。

最终，团队意识到Pinia已经实现了Vuex5中大部分内容，所以最终决定用Pinia来替代Vuex。

和Vuex相比，Pinia有很多的优势：

mutations不再存在
更友好的TypeScript支持，Vuex之前对TS的支持很不友好
不再有modules的嵌套结构，可以灵活使用每一个store，它们是通过扁平化的方式来相互使用的
不再有命名空间的概念，不需要记住它们的复杂关系

三、Pinia的安装和基本配置

3.1 安装Pinia

# npm 方式
npm install pinia
# yarn 方式
yarn add pinia

3.2 创建一个pinia并且将其传递给应用程序

1）新建store文件夹，在此文件夹下新建一个index.js

import { createPinia } from 'pinia'
//创建一个pinia实例
const pinia = createPinia()
export default pinia

2）在main.js中use它

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
createApp(App).use(pinia).mount('#app')

完成上述代码后，pinia在项目中就生效了

四、Pinia中的Store

4.1 什么是Store？

一个Store （如Pinia）是一个实体，它会持有绑定到你组件树的状态和业务逻辑，即保存了全局的状态；
它有点像始终存在，并且每个人都可以读取和写入的组件；
你可以在你的应用程序中定义任意数量的Store来管理你的状态；

Store有三个核心概念： state、getters、actions。

等同于组件的data、computed、methods。

一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions中定义的任何属性。

4.2 如何定义一个store

定义之前需要知道：

store 是使用 defineStore() 定义的
并且它需要一个唯一名称，作为第一个参数传递
这个唯一名称name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools
返回的函数统一使用useX作为命名方案，这是约定的规范

具体示例：

定义一个counter.js，在里面定义一个store

// 定义关于counter的store
import { defineStore } from 'pinia'
const useCounter = defineStore("counter", {
  // 在 Pinia 中，状态被定义为返回初始状态的函数
  state: () => ({
    count: 99
  })
})
export default useCounter

这里有一个注意点，就是defineStore函数的返回值的命名规则：

以use开头，加上传给defineStore函数的第一个参数组成，使用驼峰命名法。

这虽然不是强制，确是一个大家都遵守的规范。

4.3 使用store读取和写入 state：

<template>
  <div class="home">
    <h2>Home View</h2>
    <!-- 2.使用useCounter的实例获取state中的值 -->
    <h2>count: {{ counterStore.count }}</h2>
    <h2>count: {{ count }}</h2>
  </div>
</template>
<script setup>
  import useCounter from '@/stores/counter';
  import { storeToRefs } from 'pinia'
  // 1.直接使用useCounter获取counter这个Store的实例
  // 这个函数名称取决于defineStore的返回值
  const counterStore = useCounter()
  // 使用storeToRefs对数据进行结构，让count保持响应式的效果
  const { count } = storeToRefs(counterStore)
  // 3.修改（写入）store
  counterStore.count++ 
</script>

store在它被使用之前是不会创建的，我们可以通过调用use函数来使用store。

Pinia中可以直接使用store实例去修改state中的数据，非常方便。

注意：

store获取到后不能被解构，因为会让数据失去响应式。

为了从 store中提取属性同时保持其响应式，需要使用storeToRefs()。

4.4 修改state的多种方式

1）定义一个关于user的Store

import { defineStore } from 'pinia'
const useUser = defineStore("user", {
  state: () => ({
    name: "why",
    age: 18,
    level: 100
  })
})
export default useUser

2）三种修改state的方式

<script setup>
  import useUser from '@/stores/user'
  import { storeToRefs } from 'pinia';
  const userStore = useUser()
  const { name, age, level } = storeToRefs(userStore)
  function changeState() {
    // 1.一个个修改状态
    // userStore.name = "kobe"
    // userStore.age = 20
    // userStore.level = 200
    // 2.一次性修改多个状态
    // userStore.$patch({
    //   name: "james",
    //   age: 35
    // })
    // 3.替换state为新的对象
    const oldState = userStore.$state
    userStore.$state = {
      name: "curry",
      level: 200
    }
    // 下面会返回true
    console.log(oldState === userStore.$state)
  }
</script>

4.5 重置store

<script>
  import useCounter from '@/stores/counter';
  const counterStore = useCounter()
  counterStore.$reset()
</script>

五、getters的使用

Getters相当于Store的计算属性：

它可以用defineStore()中的getters属性定义；
getters中可以定义接受一个state作为参数的函数；

5.1 定义getters

// 定义关于counter的store
import { defineStore } from 'pinia'
const useCounter = defineStore("counter", {
  state: () => ({
    count: 99
  }),
  getters: {
    // 基本使用
    doubleCount(state) {
      return state.count * 2
    },
    // 2.一个getter引入另外一个getter
    doubleCountAddOne() {
      // this是store实例，可以直接使用另一个getter
      return this.doubleCount + 1
    },
    // 3.getters也支持返回一个函数
    getFriendById(state) {
      return function(id) {
        for (let i = 0; i < state.friends.length; i++) {
          const friend = state.friends[i]
          if (friend.id === id) {
            return friend
          }
        }
      }
    },
  },
})
export default useCounter

5.2 访问getters

<template>
  <div class="home">
    <!-- 在模板中使用 -->
    <h2>doubleCount: {{ counterStore.doubleCount }}</h2>
    <h2>doubleCountAddOne: {{ counterStore.doubleCountAddOne }}</h2>
    <h2>friend-111: {{ counterStore.getFriendById(111) }}</h2>
  </div>
</template>
<script setup>
  import useCounter from '@/stores/counter';
  const counterStore = useCounter()
  // 在js文件中使用
  const doubleCount = counterStore.doubleCount;
  const doubleCountAddOne = counterStore.doubleCountAddOne;
  const frend =  counterStore.getFriendById(111)
</script>

5.3 getters中获取另一个store中的state/getters数据

// 定义关于counter的store
import { defineStore } from 'pinia'
// 引入另一个store
import useUser from './user'
const useCounter = defineStore("counter", {
  state: () => ({
    count: 99,
  }),
  getters: {
    // 4.getters中用到别的store中的数据
    showMessage(state) {
      // 1.获取user信息
      const userStore = useUser()
      // 2.获取自己的信息
      // 3.拼接信息(使用另一个store中的数据)
      return `name:${userStore.name}-count:${state.count}`
    }
  }
})
export default useCounter

六、actions的使用

actions 相当于组件中的 methods。

可以使用defineStore()中的actions属性定义，并且它们非常适合定义一些业务逻辑。

和getters一样，在action中可以通过this访问整个store实例的所有操作。

6.1 基本定义方式

// 定义关于counter的store
import { defineStore } from 'pinia'
const useCounter = defineStore("counter", {
  state: () => ({
    count: 99,
  }),
  // 定义actions
  actions: {
    increment() {
      this.count++
    },
    incrementNum(num) {
      this.count += num
    }
  }
})
export default useCounter

6.2 基本使用方式

<template>
  <div class="home">
    <h2>doubleCount: {{ counterStore.count }}</h2>
    <button @click="changeState">修改state</button>
  </div>
</template>
<script setup>
  import useCounter from '@/stores/counter';
  const counterStore = useCounter()
  function changeState() {
    // 可以通过counterStore对象直接使用
    // counterStore.increment()
    counterStore.incrementNum(10)
  }
</script>

6.3 Actions中的异步操作

import { defineStore } from 'pinia'
const useHome = defineStore("home", {
  state: () => ({
    banners: [],
    recommends: []
  }),
  actions: {
    async fetchHomeMultidata() {
      const res = await fetch("http://123.207.32.32:8000/home/multidata")
      const data = await res.json()
      //得到数据后直接复制给state
      this.banners = data.data.banner.list
      this.recommends = data.data.recommend.list
      return 'success'
    }
  }
})
export default useHome

6.4 调用异步actions方法

<script setup>
  import useHome from '@/stores/home';
  const homeStore = useHome()
  homeStore.fetchHomeMultidata().then(res => {
    console.log("fetchHomeMultidata的action已经完成了:", res)
  })
</script>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Vue状态管理–Pinia使用详解

一、Pinia概述

二、Pinia和Vuex的区别

三、Pinia的安装和基本配置

3.1 安装Pinia

3.2 创建一个pinia并且将其传递给应用程序

1）新建store文件夹，在此文件夹下新建一个index.js

2）在main.js中use它

四、Pinia中的Store

4.1 什么是Store？

4.2 如何定义一个store

4.3 使用store读取和写入 state：

4.4 修改state的多种方式

4.5 重置store

五、getters的使用

5.1 定义getters

5.2 访问getters

5.3 getters中获取另一个store中的state/getters数据

六、actions的使用

6.1 基本定义方式

6.2 基本使用方式

6.3 Actions中的异步操作

6.4 调用异步actions方法

评论(0)

提示：请文明发言取消回复

作者信息

最近更新

HTML head 头标签详细解答

推荐几个优秀的echarts 图表网站，让你轻松搞定全部报表

移动端H5实现拍照功能的两种方法

宝塔面板FTP链接不上怎么办

用CSS样式和WordPress替换样式实现网站内容链接添加超链接图标方法

PyCharm编辑器安装requests库方法

记录Python安装wordpress_xmlrpc库实现离线发布文章

Python利用XML-RPC离线发布ZBLOG PHP文章

Vue状态管理–Pinia使用详解

一、Pinia概述

二、Pinia和Vuex的区别

三、Pinia的安装和基本配置

3.1 安装Pinia

3.2 创建一个pinia并且将其传递给应用程序

1）新建store文件夹，在此文件夹下新建一个index.js

2）在main.js中use它

四、Pinia中的Store

4.1 什么是Store？

4.2 如何定义一个store

4.3 使用store读取和写入 state：

4.4 修改state的多种方式

4.5 重置store

五、getters的使用

5.1 定义getters

5.2 访问getters

5.3 getters中获取另一个store中的state/getters数据

六、actions的使用

6.1 基本定义方式

6.2 基本使用方式

6.3 Actions中的异步操作

6.4 调用异步actions方法

评论(0)

提示：请文明发言 取消回复

相关文章

作者信息

最近更新

提示：请文明发言取消回复