The use of pinia in vite+vue3+ts

The use of pinia in vite+vue3+ts

Please follow my above article ( vite+vue3+ts novice tutorial ) to install vite+vue3+ts, etc.

• Pinia is much better than vuex when using vue3+ts
• pinia can be used as data storage and sharing for vue3 projects. Not only is the API more concise, but it can also be used with ts to better implement type derivation.

pnpm install pinia //效果等于vuex

pinia official website: https://pinia.web3doc.top/

use

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')

Next, create src/store/breadcrumb.tsthe file.
For example:

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
        }
    },
})

Use in projects

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