1.用自己喜歡的方式安裝
1 2 3 | yarn add pinia
npm install pinia
|
登入後複製
2.main.js引入
1 2 3 4 5 6 7 8 | import { createApp } from & #39;vue'
import App from & #39;./App.vue'
const app=createApp(App)
import { createPinia } from & #39;pinia' //引入pinia
app.use(createPinia())
app.mount(& #39;#app')
|
登入後複製
3.建立store檔案並設定內部的index.js檔案
1 2 3 4 5 6 7 8 9 10 11 12 | import { defineStore } from & #39;pinia' //引入pinia
export const useCar=defineStore( "test" ,{
state: () =>{
return ({
msg: "这是pinia" ,
name: "小小" ,
age:18
})
}
})
|
登入後複製
4.元件使用方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <template>
<h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
<button @click= "modify" >修改store.name</button>
</template>
<script>
import { defineComponent, ref } from & #39;vue';
import {
reactive,
toRefs,
onMounted,
onActivated
} from "vue" ;
import {useCar} from "../store/index.js"
export default defineComponent({
let store=useCar()
setup() {
const state = reactive({
testMsg: "原始值" ,
});
onMounted(async () => {});
onActivated(() => {})
const methods = {
modify(){
store.name = state.testMsg
console.log(store.name)
}
};
return {
...toRefs(state),
...methods,
};
}
})
</script>
|
登入後複製
5.重設store.$reset()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <template>
<h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
<button @click= "reset" >重置store.name</button>
</template>
<script>
import { defineComponent, ref } from & #39;vue';
import {
reactive,
toRefs,
onMounted,
onActivated
} from "vue" ;
import {useCar} from "../store/index.js"
export default defineComponent({
let store=useCar()
setup() {
const state = reactive({
testMsg: "原始值" ,
});
onMounted(async () => {});
onActivated(() => {})
const methods = {
reset(){
store.$reset()
console.log(store.name)
}
};
return {
...toRefs(state),
...methods,
};
}
})
</script>
|
登入後複製
6.群體修改store.$patch,可以將pinia的資料進行相同修改
特點:批次修改但狀態只刷新一次
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <template>
<h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
<button @click= "modify" >修改store.name</button>
<button @click= "reset" >重置store.name</button>
<button @click= "allModify" >群体修改store.name</button>
</template>
<script>
import { defineComponent, ref } from & #39;vue';
import {
reactive,
toRefs,
onMounted,
onActivated
} from "vue" ;
import {useCar} from "../store/index.js"
export default defineComponent({
let store=useCar()
setup() {
const state = reactive({
testMsg: "原始值" ,
});
onMounted(async () => {});
onActivated(() => {})
const methods = {
modify(){
store.name = state.testMsg
console.log(store.name)
},
reset(){
store.$reset()
console.log(store.name)
},
allModify(){
store.$patch({
name: "花花" ,
age:20,
})
}
};
return {
...toRefs(state),
...methods,
};
}
})
</script>
|
登入後複製
7.訂閱修改
1 2 3 4 5 | store.$subscribe((mutation, state) => {
localStorage.setItem(& #39;hello', JSON.stringify(state))
})
|
登入後複製
8.Getter
Getter 完全等同於Store 狀態的計算值。它們可以用 defineStore() 中的 getters 屬性定義。他們接收「狀態」作為第一個參數以鼓勵箭頭函數的使用:(ps:雖然鼓勵但是依然提供了非es6玩家的使用方式內部可以用this代表state)
1 2 3 4 5 6 7 8 9 10 11 | export const useStore = defineStore(& #39;main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
})
|
登入後複製
9.Actions
在pinia中沒有提供mutaion 因為Actions就夠了(它可以異步同步的統一修改狀態)之所以提供這個功能就是為了專案中的公共修改狀態的業務統一
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | export const useStore = defineStore(& #39;main', {
state: () => ({
counter: 0,
}),
actions: {
increment() {
this .counter++
},
randomizeCounter(state) {
state.counter = Math.round(100 * Math.random())
},
randomizeCounter(state) {
ajax.hplBaseApi( "app/productSelection/categoryRows" , {}, "post" ).then((res) => {
state.counter = res.data.length
});
}
},
})
setup() {
const store = useStore()
store.increment()
store.randomizeCounter()
}
|
登入後複製
以上是Vue3中怎麼引入Pinia儲存庫並使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!