Pinia
Pinia是一个轻量级状态管理库
安装
npm install pinia
引入
// main.js
import { createPinia } from 'pinia'
app.use(createPinia())
创建store
// src -> store -> index.js
import { defineStore } from 'pinia'
export const useMainStore = defineStore('main', {
// main 唯一值 作用类似 id
state: () => ({
count: 0,
msg: '我是一条msg信息'
}),
actions: {
increment() {
this.count++
}
},
getters: {
// this -> state
countToString: state => String(state.count)
}
})
使用
import { useMainStore } from '@/store/index'
setup(){
const mainStore = useMainStore()
// 方式一
// mainStore.count++
// 方式二 适用于多数据改变
/*
mainStore.$patch({
count: mainStore.count + 1,
msg: '信息+1'
})
*/
// 方式三
/*
mainStore.$patch(state => {
state.count++
state.msg = '信息+2'
})
*/
// 方式四
mainStore.increment()
// 获取getters
const countStr = mainStore.countToString
}
import { useMainStore } from '@/store/index'
import { storeToRefs } from "pinia"
setup(){
const mainStore = useMainStore()
// const { count, msg } = mainStore // 该操作会导致数据失去响应式
// 修改
const { count, msg } = storeToRefs(mainStore)
count.value++
}