使用vue-cli創(chuàng)建項(xiàng)目
vue create vue2pinia
cd vue2pinia
npm install
npm run serve // 初始化項(xiàng)目運(yùn)行OK
安裝pinia模塊
npm i pinia pinia-plugin-persistedstate
引入pinia模塊
- 創(chuàng)建store/index.js
// index.js
import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
import pps from 'pinia-plugin-persistedstate'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
pinia.use(pps)
export default pinia
// 多模塊中轉(zhuǎn)
export * from './modules/userInfo'
// userInfo.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('userInfo', {
state: ()=> {
return {
name: 'java',
token: '',
count: 100
}
},
actions: {
setToken(val) {
this.token = val
},
setName(val) {
this.name = val
},
setCount(val) {
this.count += val
}
},
getters: {
double: (state)=> {
return state.count * 2
}
},
persist: true // 開(kāi)啟當(dāng)前模塊的持久化
})
在main.js中引入pinia
import pinia from '@/store'
new Vue({
render: h => h(App),
pinia
}).$mount('#app')
在組件中使用倉(cāng)庫(kù)數(shù)據(jù)
import { useUserStore } from '@/store'
import { mapState, mapActions } from 'pinia' // 類似vuex
export default {
name: 'App',
computed: {
...mapState(useUserStore, ['count']) // mapState(store對(duì)象, ['屬性名稱'])
},
created() {
const user = useUserStore()
console.log(user.count)
},
methods: {
...mapActions(useUserStore, ['setToken', 'setCount']) // mapActions(store對(duì)象, ['方法名稱'])
}
}
頁(yè)面展示.png
pinia倉(cāng)庫(kù)展示.png
