Vue状态管理工具pinia的简单使用

Vue状态管理工具pinia的简单使用

1. 介绍

Pinia 是一个 Vue 状态管理工具，它是 Vue 3 官方推荐的状态管理库之一。Pinia 的目标是提供一个简单、轻量级的状态管理解决方案，它基于 Vue 3 的新响应式 API 和新的组合式 API 构建，使用起来非常直观和自然。

2. pinia在vue3中的使用

• 首先在项目中安装pinia，执行npm install pinia，然后在入口文件main.js中引入
• 我们选择与 Vue 的选项式 API 类似的方式，传入一个带有 state、actions 与 getters 属性的 Option 对象
• 你可以认为 state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)。

// main.js
import { createApp } from 'vue'
import { createPinia } from "pinia"
import App from './App.vue'
import './assets/main.css'

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

• 创建一个store

// src/store/user.js
import { defineStore } from "pinia"

export const useUserStore = defineStore({
  id: "user"
})

• 定义state，并引入使用

// src/store/user.js
import { defineStore } from "pinia"

export const useUserStore = defineStore({
  id: "user",
  state: () => {
    return {
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  }
})

// src/pages/user.vue
<template>
  <div class="user">
    {{ user.firstName }} -- {{ user.lastName }}
  </div>
</template>

<script setup>
import { useUserStore } from "../store/user"
const user = useUserStore()
</script>

• 定义getter并引入使用

// src/store/user.js
import { defineStore } from "pinia"

export const useUserStore = defineStore({
  id: "user",
  state: () => {
    return {
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  },
  getters: {
    fullName(state) {
      return state.firstName + " " + state.lastName
    }
  }
})

// src/pages/user.vue
<template>
  <div class="user">
    {{ user.fullName }}
  </div>
</template>

<script setup>
import { useUserStore } from "../store/user"
const user = useUserStore()
console.log(user.fullName);
</script>

• 定义action并使用，action中的方法可同步也可异步。

// src/store/user.js
import { defineStore } from "pinia"

function apiGetData(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(name === "Jack Joe") {
        resolve({ age: 18 })
      } else {
        reject({ msg: "查无此人!" })
      }
    }, 2000);
  })
}
export const useUserStore = defineStore({
  id: "user",
  state: () => {
    return {
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  },
  actions: {
    changeName(name) {
      [ this.firstName, this.lastName ] = name.split(" ")
    },
    async getUserData(name) {
      try {
        const res = await apiGetData(name)
        return res
      } catch(err) {
        return err
      }
    }
  },
  getters: {
    fullName(state) {
      return state.firstName + " " + state.lastName
    }
  }
})

// src/pages/user.vue
<template>
  <div class="user">
    {{ user.fullName }}
  </div>
</template>
<script setup>
import {} from "vue"
import { useUserStore } from "../store/user"

const user = useUserStore()
console.log(user.fullName);
//同步方法
user.changeName("Marry Gren")
//异步方法
const getUser = async () => {
  const userData = await user.getUserData("Jack Joe")
  console.log(userData);// {age: 18}
}
getUser()
</script>