Die Verwendung von Pinia in vite+vue3+ts
Bitte folgen Sie meinem obigen Artikel ( vite+vue3+ts Anfänger-Tutorial ), um vite+vue3+ts usw. zu installieren.
- Pinia ist viel besser als Vuex, wenn vue3+ts verwendet wird
- pinia kann als Datenspeicher und -freigabe für vue3-Projekte verwendet werden. Die API ist nicht nur prägnanter, sondern kann auch mit ts verwendet werden, um die Typableitung besser zu implementieren.
pnpm install pinia //效果等于vuex
Offizielle Pinia-Website: https://pinia.web3doc.top/
verwenden
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')
Als nächstes erstellen Sie src/store/breadcrumb.ts
die Datei.
Zum Beispiel:
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
}
},
})
Verwendung in Projekten
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是需要传递的参数