Pinia的安裝和引入
1.安裝Pinia
npm install pinia
2. 在vue項目的main.js文件中引入pinia
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia)
app.mount('#app')
Pinia的基本使用
使用pinia實現計數器
1.在src目錄下創建stores目錄，并新建文件counter.js
**2. 在counter.js文件中使用defineStore定義對象useCounterStore **
import { defineStore } from 'pinia'
import { ref } from 'vue'export const useCounterStore = defineStore('counter', () => {// 定義數據(state)const count = ref(0)// 定義修改數據的方法（action 同步+異步）const increment = () => {count.value++}// 以對象的方式return供組件使用return {count,increment}
})
**3.在App.vue文件中導入counter.js文件中的useCounterStore **
<script setup>
// 1. 導入use打頭的方法
import { useCounterStore } from '@/stores/counter'
// 2. 執行方法得到store實例對象
const counterStore = useCounterStore()
console.log(counterStore)
</script><template><button @click="counterStore.increment"> {{ counterStore.count}} </button>
</template><style scoped></style>getters和異步action
在counter.js文件中進行如下定義
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import axios from 'axios'const API_URL = "http://geek.itheima.net/v1_0/channels"
export const useCounterStore = defineStore('counter', () => {// 定義數據(state)const count = ref(0)// 定義修改數據的方法（action 同步+異步）const increment = () => {count.value++}// getter定義const doubleCount = computed(() => count.value * 2)// 定義異步actionconst list = ref([])const getList = async () => {const res = await axios.get(API_URL)list.value = res.data.data.channels}// 以對象的方式return供組件使用return {count,doubleCount,increment,list,getList}
})
在App.vue中使用
<script setup>
// 1. 導入use打頭的方法
import { useCounterStore } from '@/stores/counter'
import { onMounted } from 'vue';
// 2. 執行方法得到store實例對象
const counterStore = useCounterStore()
console.log(counterStore)
onMounted(()=>{ // 掛載期發起請求counterStore.getList()
})
</script><template><button @click="counterStore.increment"> {{ counterStore.count}} </button>{{ counterStore.doubleCount }}<ul><li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li></ul>
</template><style scoped></style>使用storeToRefs進行結構賦值，保持響應式更新
<script setup>
// 1. 導入use打頭的方法
import { useCounterStore } from '@/stores/counter'
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia'
// 2. 執行方法得到store實例對象
const counterStore = useCounterStore()
console.log(counterStore)// 直接結構賦值(響應式丟失)
// const { count, doubleCount} = counterStore
// console.log(count, doubleCount)// 方法包裹（保持響應式更新）
const { count, doubleCount } = storeToRefs(counterStore)
console.log(count, doubleCount)// 方法直接從原來的counterStore解構賦值
const { increment } = counterStore// 觸發action
onMounted(()=>{ counterStore.getList()
})
</script><template><button @click="increment"> {{ count }} </button>{{ doubleCount }}<ul><li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li></ul>
</template><style scoped></style>
？)