一、引言
1.干什么的
状态管理:保存一些状态,方便在各个组件之间共享,类似Redis的使用场景
2.使用场景
比如说我的vue项目,有各个组件,在每个组件中去获取已经登录的用户信息,那有几种办法?
- 通过路由传参(vue-router)
- 通过父子组件传值
而pinia的思想就是,由pinia做状态管理,保存在各个组件之间共享的数据,这样如果某一个组件想使用数据,直接从pinia中去获取即可,而且这个数据的变化会被各个组件感知到,这就是响应式
3.基本概念
**数据单元:**用来存储某一种数据,可以使用defineStore
定义一个数据单元,单元之间数据隔离。
- State:核心数据
- Getter:数据获取
- Action:数据操作
二、上手
1.定义
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
在src下新建stores
文件夹,新建一个js文件
import { defineStore } from 'pinia'
// 你可以任意命名 `defineStore()` 的返回值,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`,`useCartStore`,`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
// 其他配置...
})
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})
2.使用store
<script setup>
import { useCounterStore } from '@/stores/counter'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
</script>
💡 store 是一个用 reactive 包装的对象,这意味着不需要在 getters 后面写 .value。就像 setup 中的 props 一样,我们不能对它进行解构:
3.setup 语法
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
在 Setup Store 中:
ref()
就是state
属性computed()
就是getters
function()
就是actions