vue3 —— pinia

 

 

 pinia中解构对象数据的方法 storeToRefs()

main.js

import { createApp } from 'vue'
import App from './App.vue'
import pinia from '@/stores'

createApp(App).use(pinia).mount('#app')

store中的index.js

import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

store中的counter.js

// 定义关于counter的store
import { defineStore } from "pinia";

import useUser from "./user";
const useCounter = defineStore("counter", {
  state: () => ({
    count: 99,
    friend: [
      { id: 1, name: "阿一" },
      { id: 2, name: "阿二" },
      { id: 3, name: "阿三" },
    ],
  }),
  getters: {
    // 1. 基本使用
    doubleCount(state) {
      return state.count * 2;
    },

    // 2. 一个getter引入另一个getter
    // 通过this来访问到当前store实例的所有其他属性
    doubleCountAddOne() {
      return this.doubleCount + 1;
    },

    // 3. getter也支持返回一个函数
    getFriendId(state) {
    //   return state.friend.find((item) => item.id === 1);
        return function(id){
            return state.friend.find(item=> item.id = id)
        }
    },

    // 4. getters中用到别的store中的数据
    showUserMsg(state){
        // 1. 获取user信息
        const userStore = useUser()
        // 2.获取自己的信息
        // 3.拼接信息
        return `${userStore.name} 要活到 ${state.count}`
    }
  },
  actions:{
    increment(state){
        console.log(state);
        // state只是调用方法的参数
        // 用this获取当前store的数据
        return this.count++
    }
  }
});

export default useCounter;
// defineStore("user")
// defineStore("home")

 store中的user.js

import { defineStore } from "pinia";

const useUser = defineStore("user",{
    state:()=>({
        name:'张三',
        age:18,
        level:1
    })
})

export default useUser

store中的home.js

import { defineStore } from "pinia";

const useHome = defineStore("home",{
    state:()=>({
        banners:[],
        recommends:[]
    }),
    actions:{
        async fetchHome(){
            const res = await fetch('http://123.207.32.32:8000/home/multidata')
            console.log(res);
            const data = await res.json()
            console.log(data);
            this.banners = data.data.banner.list
            this.recommends = data.data.recommend.list
        }
    }
})

export default useHome

views中的user.vue

<template>
  <div class="home">
    <h2>user page</h2>
    <!-- <div>计数：{{counterStore.count}}</div> -->
    <div>姓名：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <div>等级：{{ level }}</div>

    <button @click="changeState">修改state</button>
    <button @click="resetState">重置state</button>
  </div>
</template>

<script setup>
import useUser from "@/stores/user";
import { storeToRefs } from "pinia";
const userStore = useUser();
const {name,age,level} = storeToRefs(userStore)
const changeState = () => {
    // 1. 一个个修改状态
    // userStore.name = '李四',
    // userStore.age = 19,
    // userStore.level = 100

    // 2. 一次性修改多个状态
    // userStore.$patch({
    //     name:'王五',
    //     age:20
    // })

    // 3. 设置为新对象来替换store的整个状态(很少用)
    // userStore.$state = {
    //     name:'阿达',
    //     age:21,
    //     level:20
    // }
}
const resetState = () => {
    userStore.$reset()
}
</script>

<style lang="less" scoped></style>

views中的home.vue

<template>
  <div class="home">
    <h2>home page</h2>
    <!-- <div>计数：{{counterStore.count}}</div> -->
    <div>计数：{{ count }}</div>

    <h1>-------------------使用getters----------------</h1>
    <div>计数：{{ counterStore.doubleCount }}</div>
    <div>计数+1: {{ counterStore.doubleCountAddOne }}</div>
    <div>寻找id: {{ counterStore.getFriendId(1).name }}</div>
    <div>获取别的store的信息进行拼接: {{ counterStore.showUserMsg }}</div>

    <h1>-------------------使用actions----------------</h1>
    <button @click="add">+1</button>

    <!-- 展示数据 -->
    <h1>轮播的数据</h1>
    <ul>
        <template v-for="item in homeStore.banners">
            <li>{{item.title}}</li>
        </template>
    </ul>
  </div>
</template>

<script setup>
import { toRefs } from "vue";
import { storeToRefs } from "pinia";
import useCounter from "@/stores/counter";
import useHome from "@/stores/home"
const counterStore = useCounter();
// 用toRefs解构数据
// const { count } = toRefs(counterStore);

// 在pinia中也有解构数据的方法
const { count } = storeToRefs(counterStore);

const add = () => {
    counterStore.increment(12)
};

const homeStore = useHome()
homeStore.fetchHome()
</script>

<style lang="less" scoped></style>