vite+vue3+ts での pinia の使用

vite+vue3+ts での pinia の使用

上記の記事 ( vite+vue3+ts 初心者チュートリアル) に従って、vite+vue3+ts などをインストールしてください。

• vue3+ts を使用する場合、Pinia は vuex よりもはるかに優れています
• pinia は vue3 プロジェクトのデータ ストレージおよび共有として使用でき、API がより簡潔であるだけでなく、ts と併用して型導出をより適切に実装することもできます。

pnpm install pinia //效果等于vuex

ピニア公式サイト：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是需要传递的参数