新手入门Pinia状态管理库，看完这篇文章你就懂了！

最新推荐文章于 2024-07-19 23:05:48 发布

junpeng.jiang

最新推荐文章于 2024-07-19 23:05:48 发布

阅读量267

点赞数 1

分类专栏： Pinia 文章标签：前端 vue.js vue

本文链接：https://blog.csdn.net/weixin_38568415/article/details/132358872

版权

Pinia 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是Pinia？

Pinia本质上依然是一个状态管理的库，它允许你跨组件/页面进行状态共享。

Pinia和Vuex的区别？

与Vuex相比，Pinia提供了一个更简单的API，具有更少的规范，提供了Composition-API风格的API。
最重要的是，在与TypeScript一起使用时具有可靠的类型推断支持。

和Vuex相比，Pinia有什么优势？

mutations不再存在，只有state，gettes，actions。
更友好的TypeScript支持。
不再有modules的嵌套结构，每个store都是独立的，互不影响。
没有命名空间模块。
无需动态添加 Store，默认情况下它们都是动态的。
不再需要注入、导入函数、调用函数。
支持插件来扩展自身功能。
支持服务端渲染（SSR）。

上面列出的只是Pinia的一些主要的优点，还有其它的优点，需要大家在使用的时候慢慢去体会，下面一起来看看Pinia是如何使用的。

如何使用Pinia？

安装Pinia

yarn add pinia
或者
npm install pinia

创建Pinia

// src/stores/index.js
import { createPinia } from "pinia"
const pinia = createPinia ()
export default pinia

挂载Pinia

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

import pinia from './stores'
const app = createApp(App)
app.use(pinia)

app.mount('#app')

定义一个Store

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

// src/stores/counter.js
import { defineStore } from 'pinia'

const useCounter = defineStore("counter", {
  state: () => ({
    count: 1
  })
})

export default useCounter

使用Store

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

// src/views/Home.vue
<script setup>
import useCounter from '@/stores/counter'
const counterStore = useCounter()
</script>

<template>
  <div class="home">
  	<h2>count: {{ counterStore.count }}</h2>
  </div>
</template>

解构Store

注意：

使用传统的方式将属性从store中解构出来，虽然可以获取到值，但是不具有响应式。

// src/views/Home.vue
<script setup>
import useCounter from '@/stores/counter'
const counterStore = useCounter()

// 将counter从store中解构出来，此时我们再去修改count，count的值可以修改，但是页面的值不会发生变化，不具有响应式
const { count } = counterStore
cosnt incrementCount = () => {
  counterStore.count++
}
</script>

<template>
  <div class="home">
  	<!-- count值不会随着counter++响应式更新 -->
  	<h2>count: {{ counterStore.count }}</h2>
  	<button @click="incrementCount">count++</button>
  </div>
</template>

为了从store中解构属性的时候保持其响应式，我们可以使用pinia提供的storeToRefs函数。

// src/views/Home.vue
<script setup>
import { storeToRefs } from 'pinia'
import useCounter from '@/stores/counter'
const counterStore = useCounter()

// 使用storeToRefs解构
const { count } = storeToRefs(counterStore)
cosnt incrementCount = () => {
  counterStore.count++
}
</script>

<template>
  <div class="home">
  	<!-- 使用storeToRefs解构 -->
  	<h2>count: {{ count }}</h2>
  	<button @click="incrementCount">count++</button>
  </div>
</template>

或者使用vue提供的toRefs函数。

// src/views/Home.vue
<script setup>
import { toRefs } from 'pinia'
import useCounter from '@/stores/counter'
const counterStore = useCounter()

// 使用toRefs 解构
const { count } = toRefs(counterStore)
cosnt incrementCount = () => {
  counterStore.count++
}
</script>

<template>
  <div class="home">
  	<!-- 使用toRefs 解构 -->
  	<h2>count: {{ count }}</h2>
  	<button @click="incrementCount">count++</button>
  </div>
</template>

Pinia中操作state

默认情况下，可以通过store.属性名来修改state。
可以通过调用store上的$reset()方法将state重置到其初始值。
如果想要一次修改多个state，可以调用store上的$patch方法。

// src/views/Home.vue
<script setup>
import { storeToRefs } from 'pinia'
import useUser from '@/stores/user'
const userStore = useUser()

const { name, age, height } = storeToRefs(userStore)

// 修改state，一个个修改
cosnt changeState = () => {
  userStore.name = "jackson"
  userStore.age = 25
  userStore.height = 1.8
}

// 重置state
const resetState = () => {
  userStore.$reset()
}

// 修改state，一次修改多个
const changeMoreState = () => {
  userStore.$patch({
	name: "jackson",
	age: 25,
	height: 1.8
  })
}
</script>

<template>
  <div class="home">
  	<h2>name: {{ name }}</h2>
  	<h2>age: {{ age }}</h2>
  	<h2>height: {{ height }}</h2>
  	<button @click="changeState">修改state</button>
  	<button @click="resetState">重置state</button>
  	<button @click="changeMoreState">修改多个state</button>
  </div>
</template>

// sre/stores/user.js
import { defineStore } from 'pinia'

const useUser = defineStore("user", {
  state: () => ({
	name: "james",
	age: 18,
	height: 1.7
  })
})

export default useUser

Pinia中的getters

定义和访问getter

getters相当于store的计算属性。
getters中可以接收一个state作为参数的函数。

// sre/stores/counter.js
import { defineStore } from 'pinia'

const useCounter = defineStore("counter", {
  state: () => ({
    count: 1,
    firstName: "Jackson",
    lastName: "vision",
  }),
  getters: {
	doubleCount: (state) => state.count * 2,
	fullName: (state) => `${state.firstName} ${state.lastName}`,
  }
})

export default useCounter

// src/views/Home.vue
<script setup>
import { storeToRefs } from 'pinia'
import useCounter from '@/stores/counter'
const counterStore = useCounter()

</script>

<template>
  <div class="home">
  	<h2>doubleCount: {{ counterStore.doubleCount }}</h2>
  	<h2>fullName: {{ counterStore.fullName}}</h2>
  </div>
</template>

在一个getters方法中也可以调用其它的getters方法。下图中，我们定义了一个 doubleCountAddOne 的getter方法，在该方法中，我们通过this去调用了另一个getter方法 doubleCount，这里的this指向的是store实例。

// src/views/home.vue
import { defineStore } from 'pinia'

const useCounter = defineStore("counter", {
  state: () => ({
    count: 1
  }),
  getters: {
	doubleCount: (state) => state.count * 2,
	doubleCountAddOne() {
	  return this.doubleCount + 1
	}	
  }
})

export default useCounter

getters也支持返回一个函数，这样就可以接收参数。