vite+vue3+ts中pinia的使用
请按照我的上述文章(vite+vue3+ts新手使用教程)安装vite+vue3+ts等
- pinia在使用vue3+ts时候效果比vuex好用很多
- pinia可作为vue3项目的数据存储共享,不仅API更加简洁,而且可配合ts使用,更好的实现类型推导
pnpm install pinia //效果等于vuex
pinia官网:https://pinia.web3doc.top/
使用
import {
createApp } from 'vue'
import App from './App.vue'
//pinia
import {
createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
//pinia
app.use(pinia)
app.mount('#app')
接下来,创建 src/store/breadcrumb.ts
文件。
例如:
import {
defineStore } from 'pinia'
//注意useMain, defineStore('useMain',{..}) 在项目中就使用 useMain 这个名
export const useMain = defineStore('useMain', {
// 相当于data
state: () => {
return {
counter: false,
}
},
// 相当于vuex的 mutation + action,可以同时写同步和异步的代码
actions: {
setcounter(counter: boolean) {
this.counter = counter
}
},
})
在项目中使用
import {
storeToRefs } from 'pinia'; 引入pinia
import {
useMain } from '../store/breadcrumb' //引入pinia的sh
解构userStore里面的state和getters的数据,
const userStore = useMain()
// 使用storeToRefs解构才有响应式,响应式可以直接修改数据,不过这我只用来渲染
let {
counter } = storeToRefs(userStore)
let isCollapse = counter
userStore.setcounter(isCollapse.value)//isCollapse.value是需要传递的参数