Pinia 安装和基本使用

本文是在 Vue3 + TypeScript + Vite 的开发环境上完成

希望各位朋友可以通过此篇文章学懂 Pinia !

一、 Pinia 简介

官网：Pinia (vuejs.org)

Pinia是Vue生态里Vuex的代替者，一个全新Vue的状态管理库。

二、 Pinia 优点

1. 和 Vuex 对比，取消了Mutations操作，只有 state getters actions 简化状态库管理；

2. 使用中不需要嵌套模块；

3. 完全支持 TypeScript，Vue3的优势之一就是对TypeScript的支持呀。

三、 安装

npm install pinia

或者使用 yarn

yarn add pinia

四、 使用 Pinia 创建一个 Store 实例

安装后Pinia后，在我们的Vue项目中使用。

在我们的main.ts里边引入 pinia，并且实例化：

import { createPinia } from 'pinia' 

const pinia = createPinia()

最后挂载vue实例上（完整代码）：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

五、 创建 Store 状态管理库

默认情况下，我们会在 /src下创建一个 /store文件夹来专门设置状态管理库，用作于：

1）初始化定义状态；

2）修改仓库的 state；

3）对 action的使用。

创建 /src/store/index.ts:

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: ()=>{
        return {}
    },
    getters: {},
    actions: {}
})

• 解释：

  • defineStore()：第一个参数，为容器的一个别名且此名字必须唯一，不能重复，第二个参数理解为配置对象

  • state：用来存储全局状态

  • getters：用来监听或者计算状态变化的，有缓存功能

  • actions：用来对 state 里数据变化的业务逻辑，个人理解为，修改 state 全局状态数据的

六、 在组件里读取 store

1. 在 store创建一个state

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: ()=>{
        return {
          helloWorld: 'Hello Pinia!'
        }
    },
    getters: {},
    actions: {}
})

• 在/scr/components里创建一个 Hello.vue的组件：

  • 先引入mainStore,得到 store的实例，就可以得到store里定义的状态数据了

  • 在/App.vue中引入Hellp.vue组件（此步骤比较简单，不展示代码啦）

  • 官方问题提供了storeToRefs()方法，方便我们解构使用，代码如下

  • 注意：直接解构不是响应的，只有一次作用，大坑！

<template>
  <h3>{{store.helloWorld}}</h3>
    <h3>解构：{{ helloWorld }}</h3>
</template>

<script lang="ts" setup>
import { mainStore } from "../store"
import { storeToRefs } from "pinia"
const store = mainStore()
// 解构：
const { helloWorld } = storeToRefs(store)
</script>

<style></style>

2. 运行npm run dev ：

运行

七、 修改状态数据的几种方法

1. 如同获取的方法

<script lang="ts" setup>
  import { mainStore } from "../store";
  const store = mainStore()
  // 方法一
  const update = () => {
    store.helloWorld = 'hello world'
  }
</script>

2. $patch的两种方法

<script lang="ts" setup>
  import { mainStore } from "../store";
  const store = mainStore()
  // 方法二
  const handleClickPatch = () => {
    store.$patch({
      helloWorld: 'hello world => patch'
    })
  }
  // 方法三-使用$patch回调函数
  const handleClickMethod = () => {
    store.$patch((state)=>{
      state.helloWorld = 'hello world => method'
    })
  }
</script>

3. 使用actions

一定要注意actions中的this指向，不能使用箭头函数呐（老生常谈）

• 在/store中：

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: ()=>{
        return {
          helloWorld: 'Hello Pinia!'
        }
    },
    getters: {},
    actions: {
      actionChange() {
            this.helloWorld = 'hello world => actions'
        },
    },
})

• 在/Hello中：

<script lang="ts" setup>
  import { mainStore } from "../store";
  const store = mainStore()
  // 方法四
  const handleClickActions = () => {
    store.actionChange()
  }
</script>

八、Getters的使用

Pinia中的Getters和Vuex的计算属性几乎一致，暂时就不写啦，以后再来填坑。