import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
createApp(App).use(pinia).mount('#app')
user.js
import { defineStore } from 'pinia'
const useUser = defineStore("user", {
state: () => ({
name: "why",
age: 18,
level: 100
})
})
export default useUser
获取state中的数据:
<template>
<div class="home">
<!-- 第一种方法:直接调用,具有响应式 -->
<h2>name: {{ userStore.name }}</h2>
<h2>name: {{ name }}</h2>
<h2>age: {{ age }}</h2>
<h2>level: {{ level }}</h2>
</div>
</template>
<script setup>
import { toRefs } from 'vue'
import useUser from '@/stores/user'
import { storeToRefs } from 'pinia';
const userStore = useUser()
// 解构会失去响应式,需使用toRefs或者storeToRefs才有响应式
// const { name, age, level } = toRefs(counterStore)
const { name, age, level } = storeToRefs(userStore)
</script>
修改state中的数据:
<script setup>
import useUser from '@/stores/user'
const userStore = useUser()
function changeState() {
// 1.一个个修改状态
userStore.name = "kobe"
userStore.age = 20
userStore.level = 200
// 2.一次性修改多个状态
userStore.$patch({
name: "james",
age: 35
})
// 3.替换state为新对象:这边的替换并没有完全替换,而是两个对象的合并
const oldState = userStore.$state
userStore.$state = {
name: "curry",
level: 200
}
console.log(oldState === userStore.$state)
}
// 4.还原state原本的数据
function resetState() {
userStore.$reset()
}
</script>
getters: {
// 1.基本使用
doubleCount(state) {
return state.count * 2
},
// 2.一个getter引入另外一个getter
doubleCountAddOne() {
// this是store实例
return this.doubleCount + 1
},
// 3.getters也支持返回一个函数,函数参数就是传入参数
getFriendById(state) {
return function(id) {
for (let i = 0; i < state.friends.length; i++) {
const friend = state.friends[i]
if (friend.id === id) {
return friend
}
}
}
},
// 4.getters中用到别的store中的数据
showMessage(state) {
const userStore = useUser()
return `name:${userStore.name}-count:${state.count}`
}
},
<template>
<div class="home">
<h2>Home View</h2>
<h2>doubleCount: {{ counterStore.doubleCount }}</h2>
<h2>doubleCountAddOne: {{ counterStore.doubleCountAddOne }}</h2>
<h2>friend-111: {{ counterStore.getFriendById(111) }}</h2>
<h2>friend-112: {{ counterStore.getFriendById(112) }}</h2>
<h2>showMessage: {{ counterStore.showMessage }}</h2>
<button @click="changeState">修改state</button>
<button @click="resetState">重置state</button>
</div>
</template>
<script setup>
import useCounter from '@/stores/counter';
const counterStore = useCounter()
</script>
actions: {
increment() {
this.count++
},
incrementNum(num) {
this.count += num
},
async fetchHomeMultidata() { //
const res = await fetch("http://123.207.32.32:8000/home/multidata")
const data = await res.json()
this.banners = data.data.banner.list
this.recommends = data.data.recommend.list
return 'true' //异步函数都返回一个promise,resolve(undefined),可以自己return来替代返回值
//或者可以自定义一个promise来实现
// return new Promise(async (resolve, reject) => {
// const res = await fetch("http://123.207.32.32:8000/home/multidata")
// const data = await res.json()
// this.banners = data.data.banner.list
// this.recommends = data.data.recommend.list
// resolve("bbb")
// })
}
}
<script setup>
import useHome from '@/stores/home';
const homeStore = useHome()
function changeState() {
// homeStore.increment()
homeStore.incrementNum(10)
}
homeStore.fetchHomeMultidata().then(res => {
//.then可以监听actions是否完成,也可以接收到返回的参数
console.log("fetchHomeMultidata的action已经完成了:", res)
})
</script>