Vue3系列——Pinia状态管理库

目录

Pinia

安装、创建

Store

定义Store

Option Store

Setup Store

使用Store

storeToRefs

action异步实现

---

Pinia

Pinia是Vue的专属状态管理库，它允许跨组件或页面共享状态，实现和Vuex一样的数据共享，是Vuex状态管理工具的替代品。其：

• 提供更加简单的API，去掉了mutation；

• 提供符合组合式风格的API与Vue3新语法统一；

• 去掉了modules的概念，每个store都是一个独立的模块；

• 搭配TypeScript一起使用提供可靠的类型推断。

简单地了解了Pinia后，我们正式开始学习Pinia。

安装、创建

安装Pinia库的方法很简单，在终端执行如下命令即可：

npm install pinia

安装pinia后，我们需要在main.js中，通过createPinia方法创建一个pinia实例并将其传递给app应用，示例代码如下：

import "./assets/main.css";
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";  // 导入createPinia方法

const pinia = createPinia();  // 创建Pinia实例
createApp(App).use(pinia).mount("#app"); // 把pinia实例加入到app应用中

这样我们就成功地安装、创建pinia实例并将其传递给app应用了，可以愉快地使用pinia了。

Store

在使用Pinia之前，先简单了解一下Store。

Store是一个保存状态和业务逻辑的实体，不与组件绑定，但它承载着全局状态，每个组件都可以读取和写入它，它有三个概念：

• state：返回初始状态的函数、数据；

• getter：Vue的computed计算属性，通过defineStore中的getters属性来定义；

• action：方法method，通过defineStore中的actions属性来定义；

使用场景：当该数据、方法在很多地方都需要使用或需要通过页面保存的数据，如显示在导航栏中用户信息，一个多步骤表单页面等，这时我们就可以使用Store了。

定义Store

我们通过defineStore方法定义Store，其语法格式如下：

import { defineStore } from 'pinia'
export const Store名字 =defineStore('Store的ID名',{
 //其他配置......
})

在defineStore方法中，第一个参数为Store的ID名，是必须传入的值，它用来连接store和devtools，第二个参数可接受两类数据：Setup函数或Option对象。

注意：在定义Store名字时，尽量使用use××××的命名格式。

Option Store

第二个传入的参数类型为Option对象时，语法格式为：

import { defineStore } from 'pinia'
export const store名字=defineStore('storeID名',{
 state: // 数据
 getters: //计算属性
    actions: //方法
})

其中：state是store的数据，getters是store的计算属性，actions是store方法。

示例代码如下：

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Setup Store

第二个传入参数类型为Setup函数时，语法格式如下：

import { defineStore } from 'pinia'
import { ref, computed } from "vue"
export const Store名字= defineStore ('storeID名',()=>{
 const 数据名 = ref()    // 定义数据 state
    const 方法名 = ()=>{  // 定义方法 action
     //方法 
    }
 const 计算属性名 = computed(() => // 操作); // 定义计算属性
 return { 数据名, 方法名, 计算属性名  }
})

需要注意的是：在传入参数类型为Setup函数时，需要把数据、方法、计算属性通过return返回出去供外界使用。示例代码如下：

export const useCounterStore = defineStore('counter',()=>{
 const count ref(0)  // 定义数据
 const increment=()=>{ // 定义方法
  count.value++
 }
 const doubleCount =computed(()=>count.value*2)  // 定义计算属性
 return {count,increment,doubleCount}  // 返回
})

个人更喜欢用Setup Store类型。

使用Store

使用Store很简单，只需要引入写好的Store文件，创建store实例对象，其语法格式如下：

<script setup>
import { Store名字 } from "Store文件路径"
const 实例名 = Store名字()
</script>

<template>
	<div @click="实例名.方法">{{ 实例名.数据名/计算属性名 }}</div>
</template>

示例代码如下：

<script setup>
import { useCounterStore } from "./stores/counter"
const counterStore = useCounterStore()	//创建store实例
</script>

<template>
  <div @click="counterStore.increment">数据--{{ counterStore.count }}</div>
  <div>计算属性值--{{ counterStore.doubleCount }}</div>
</template>

这里我们使用了上面的Setup Store示例代码作为store，运行结果如下：

storeToRefs

当我们使用解构语法调用store中的数据、计算属性时，需要在创建store实例时添加storeToRefs方法，示例代码如下：

<script setup>
import { useCounterStore } from "./stores/counter"
import { storeToRefs } from "pinia"
const { count, doubleCount }  = storeToRefs(useCounterStore())	//创建store实例
</script>
<template>
  <div>数据--{{ counterStore.count }}</div>
  <div>计算属性值--{{ counterStore.doubleCount }}</div>
</template>

运行结果如下：

使用storeToRefs函数可以辅助保持数据（state+getter）的响应式解构。

注意：storeToRefs只能用于数据、计算属性，不能用于方法，方法直接从原来的counterStore中解构赋值。

当我们不使用storeToRefs解构数据时，会导致响应式失效，示例代码如下：

<script setup>
import { useCounterStore } from "./stores/counter"
const { count, doubleCount } = useCounterStore()  //创建store实例
const CounterStore = useCounterStore() 
</script>
<template>
  <div @click="CounterStore.increment">数据--{{ count }}</div>
  <div>计算属性值--{{ doubleCount }}</div>
</template>

当我们点击div标签时，数据没有任何反应。

action异步实现

在上面的方法中，我们的action处理的是同步，当我们需要处理异步的方法时，需要axios库，store示例代码如下：

import { defineStore } from "pinia"
import { ref} from "vue"
import axios from "axios"
const API_URL = "url连接"
export const useCounterStore = defineStore("asyncStore", () => {
  const list = ref([])   // 定义数据
  const getList = async () => {   // 定义异步方法
    const res = await axios.get(API_URL) // 获取数据
    list.value = res.data.data.channels    // 数据赋值
  }
  // 以对象的方式return供组件使用
  return {getList,list}
})

vue文件示例代码如下：

<script setup>
import { useCounterStore } from "./stores/counter";
const counterStore = useCounterStore(); //创建store实例
</script>

<template>
  <button @click="counterStore.getList">获取数据</button>
  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

运行结果如下：

 好了，Vue3系列——Pinia入门就将学到这里了

公众号：白巧克力LIN

该公众号发布Python、数据库、Linux、Flask、自动化测试、Git、算法、Vue3等相关文章！

- END -