vue3 pinia

1、pinia配置

	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')

2、State

(1) state定义：

user.js

	import { defineStore } from 'pinia'
	
	const useUser = defineStore("user", {
	  state: () => ({
	    name: "why",
	    age: 18,
	    level: 100
	  })
	})
	export default useUser

(2) state使用

获取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>

3、getters

(1) getters定义

	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}`
	    }
	  },

(2) getters使用

	<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>

4、actions

(1) actions定义

 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")
      // })
    }
  }

(2) Actions使用

<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>