什么是状态管理?
理论上来说,每⼀个 Vue 组件实例都已经在“管理”它⾃⼰的响应式状态了。我们以⼀个简单的计数器组 件为例:
<script>
export default {
// 状态
data() {
return {
count: 0
}
},
// 动作
methods: {
increment() {
this.count++
}
}
}
</script>
<!-- 视图 -->
<template>{{ count }}</template>
它是⼀个独⽴的单元,由以下⼏个部分组成:
状态:驱动整个应⽤的数据源;
视图:对状态的⼀种声明式映射;
交互:状态根据⽤户在视图中的输⼊⽽作出相应变更的可能⽅式。 下⾯是“单向数据流”这⼀概念的简单图示:
Pinia : https://pinia.vuejs.org/zh/
pinia的简介:
1.安装:
npm i pinia
# 或者使⽤ cnpm
cnpm i pinia
Vue3中
import { createApp } from 'vue'
// 导⼊pinia
import { createPinia } from 'pinia'
import App from './App.vue'
// 创建pinia实例
const pinia = createPinia()
const app = createApp(App)
// 使⽤pinia
app.use(pinia)
app.mount('#app')
Store (如 Pinia) 是⼀个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全 局状态。它有点像⼀个永远存在的组件,每个组件都可以读取和写⼊它。它有三个概念,state、getter 和 action,我们可以假设这些概念相当于组件中的 data、 computed 和 methods。
应该在什么时候使⽤ Store? ⼀个 Store 应该包含可以在整个应⽤中访问的数据。这包括在许多地⽅使⽤的数据,例如显示在 导航栏中的⽤户信息,以及需要通过⻚⾯保存的数据,例如⼀个⾮常复杂的多步骤表单。 另⼀⽅⾯,你应该避免在 Store 中引⼊那些原本可以在组件中保存的本地数据,例如,⼀个元素 在⻚⾯中的可⻅性。
并⾮所有的应⽤都需要访问全局状态,但如果你的应⽤确实需要⼀个全局状态,那 Pinia 将使你的 开发过程更轻松。
Store
是⽤ defineStore() 定义的,它的第⼀个参数要求是⼀个独⼀⽆⼆的名字:
import { defineStore } from 'pinia'
// 你可以对 `defineStore()` 的返回值进⾏任意命名,但最好使⽤ store 的名字,同时以 `u
se` 开头且以 `Store` 结尾。(⽐如 `useUserStore`,`useCartStore`,`useProductSt
ore`)
// 第⼀个参数是你的应⽤中 Store 的唯⼀ ID。
// defineStore() 的第⼆个参数可接受两类值:Setup 函数或 Option 对象。
export const useAlertsStore = defineStore('alerts', {
// 其他配置...
})
options的写法
import { defineStore } from 'pinia';
export const useMyStore = defineStore('myStore', {
state: () => ({
count: 0,
// other state properties
}),
actions: {
increment() {
this.count++;
},
// other actions
},
getters: {
doubleCount() {
return this.count * 2;
},
// other getters
},
});
setup的写法:
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
})
state 是你的 store 的核⼼,它有点类似Vue组件中的data,是每个Store的数据中⼼
import { defineStore } from 'pinia'
const useStore = defineStore('storeId', {
// 为了完整类型推理,推荐使⽤箭头函数
state: () => {
return {
// 所有这些属性都将⾃动推断出它们的类型
count: 0,
name: 'Eduardo',
isAdmin: true,
items: [],
hasChanged: true,
}
},
})
Action
Action 相当于vue组件中的 method。它们可以通过 defineStore() 中的 actions 属性来定义,并且 它们也是定义业务逻辑的完美选择。
export const useCounterStore = defineStore('main', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
randomizeCounter() {
this.count = Math.round(100 * Math.random())
},
},
})