【笔记】pinia的简单应用

pinia是vue家族新的状态管理模块，用尤大的话讲，pinia实质上就是vuex的5.0版本。

安装

npm install pinia

模块引入

在main.js中加入如下代码

import { createPinia } from 'pinia'

app.use(createPinia())

定义stores

需要在src下新建stores文件夹，然后在该文件夹下创建所需要的module
比如，我们创建一个user.js

import { defineStore } from 'pinia'

// pinia使用defineStore来创建一个hook
export const useUserStore = defineStore({
  // id是必填的，并且这个id的值是需要全局唯一的
  id: 'user',
  
  // state，声明该store中的state
  state: () => ({
    name: '',
    age: 0,
    sex: 0
  }),
  
  // getters， 声明getters
  // pinia中的getters与vue中计算属性的用法差不多
  // 这里的变量会根据所引用的state值的变化而变化
  getters: {
    // 声明getters有两种方式
    // 1.箭头函数，有一个state参数，可通过其访问state中的变量
    doubleAge: (state) => state.age * 2,
    // 2.普通函数，可直接在内部通过this访问state及getters中的变量
    parseSex() {
      // 通过this访问state
      if (this.sex === 1) {
        return '男'
      } else {
        return '女'
      }
    },
    doublePlusAge() {
      // 通过this访问getters
      return this.doubleAge + 1
    }
  },
  
  // actions，定义操作state的事件，函数既可以是同步的也可以是异步的
  // 方法中如果需要更改state，直接使用this即可访问更改
  actions: {
    async login(data) {
      // 模拟发送登录请求
      const res = await request.login({
        username: data.username,
        password: data.password
      })
      if (res) {
        this.name = res.username
        this.age = res.age
        this.sex = res.sex
        localStorage.setItem('token', res.token)
      }
    },
    logout() {
      this.name = ''
      this.age = 0
      this.sex = 0
      localStorage.removeItem('token')
    }
  }
})

我们可以发现

• 增加了id属性，并且必填且唯一
• 一般简单的应用中，只需要state和actions即可
• getters相当于计算属性
• 在getters和actions中，可以直接通过this来访问state
• 移除了mutations

在<script setup>中使用

直接引入src/stores下的文件，获取useStore对象即可使用

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 如果需要解构赋值，并获取对应的响应性，则需要通过storeToRefs
const { name } = storeToRefs(userStore)

const logout = () => {
  // 通过userStore访问actions
  userStore.logout()
}
</script>

<template>
  <!-- 可以通过userStore直接访问state -->
  <!-- 并且该name属性是响应式的 -->
  <div>{{ userStore.name }}</div>
  <div>{{ name }}</div>
  <button @click="logout">退出</button>
</template>