vite+vue3+ts中pinia的使用

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是需要传递的参数