vue3项目pinia的统一封装
vue3引入了新的vue.js状态的管理库,相较与以前的vuex,写法上更简单也更符合vue3的标准:
import { defineStore } from 'pinia'
import {ref} from 'vue
export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment }
})#在需要使用的文件
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
获取count =》 counter.count
获取increment方法,直接counter.increment()
但是,随着定义的状态管理增多,需要多次导入,所以这里记录下统一封装的使用:
1.stores下面定义index.js和modules文件夹分别创建cart.js和user.js
2.这里室stores/index.js的文件内容:
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
export * from './modules/user'
export * from './modules/cart'
const pinia = cr