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>
