【JEECG】Vue3-03Pinia详细使用教程

1、安装

npm install pinia
或
yarn add pinia

2、引用

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')

3、使用

user.js

import { defineStore } from 'pinia'

const useUser = defineStore("user", {
  state: () => ({
    name: "st",
    age: 18,
    level: 100
  })
})

export default useUser

number.js

// 定义关于number的store
import { defineStore } from 'pinia'

import useUser from './user'

export default defineStore('number', {
  state: () => ({
    number: 10,
    infos: [
      { id: 111, name: 'st1' },
      { id: 112, name: 'st2' },
      { id: 113, name: 'st3' },
    ],
  }),
  getters: {
    // 1.基本使用
    doubleNumber(state) {
      return state.number * 2
    },
    // 2.一个getter引入另外一个getter
    doubleNumberAddOne() {
      // this是store实例
      return this.doubleNumber + 1
    },
    // 3.getters也支持返回一个函数
    getInfoById(state) {
      return function (id) {
        for (let i = 0; i < state.infos.length; i++) {
          const info = state.infos[i]
          if (info.id === id) {
            return info
          }
        }
      }
    },
    // 4.getters中用到别的store中的数据
    showMessage(state) {
      // 1.获取user信息
      const userStore = useUser()
      // 2.获取自己的信息
      return `name:${userStore.name}-number:${state.number}`
    },
  },
  actions: {
    increment() {
      this.number++
    },
    incrementNum(num) {
      this.number += num
    },
  },
})

home.js

import { defineStore } from 'pinia'

const useHome = defineStore('home', {
  state: () => ({
    banners: [],
    recommends: [],
  }),
  actions: {
    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
    },
  },
})

export default useHome

基本使用

<template>
  <div class="home">
    <h2>number: {{ numberStore.number }}</h2>
    <h2>number-toRefs: {{ number }}</h2>
    <h2>number-storeToRefs: {{ number }}</h2>
    <button @click="incrementNumber">count+1</button>
  </div>
</template>

<script setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import useNumber from '@stores/number'

const numberStore = useNumber()

// const { number } = toRefs(numberStore)
const { number } = storeToRefs(numberStore)

function incrementNumber() {
  numberStore.number++
}
</script>

<style scoped></style>

核心State

<template>
  <div class="home">
    <h2>name: {{ name }}</h2>
    <h2>age: {{ age }}</h2>
    <h2>level: {{ level }}</h2>
    <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)

function changeState() {
  // 1.一个个修改状态
  // userStore.name = 'kobe'
  // userStore.age = 20
  // userStore.level = 200

  // 2.一次性修改多个状态
  // userStore.$patch({
  //   name: "haha",
  //   age: 35
  // })

  // 3.替换state为新的对象
  const oldState = userStore.$state
  userStore.$state = {
    name: "curry",
    level: 200
  }
  console.log(oldState === userStore.$state)
}

function resetState() {
  userStore.$reset()
}
</script>

<style scoped></style>

核心Getters

<template>
  <div class="home">
    <h2>doubleNumber: {{ numberStore.doubleNumber }}</h2>
    <h2>doubleNumberAddOne: {{ numberStore.doubleNumberAddOne }}</h2>
    <h2>Info-111: {{ numberStore.getInfoById(111) }}</h2>
    <h2>Info-112: {{ numberStore.getInfoById(112) }}</h2>
    <h2>showMessage: {{ numberStore.showMessage }}</h2>
  </div>
</template>

<script setup>
import useNumber from '@stores/number'
const numberStore = useNumber()
</script>

<style scoped></style>

核心Actions

<template>
  <div class="home">
    <h2>doubleNumber: {{ numberStore.doubleNumber }}</h2>
    <button @click="changeState">修改state</button>
    <ul>
      <template v-for="item in homeStore.banners">
        <li>{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>

<script setup>
import useNumber from '@stores/number'
import useHome from '@stores/home'

const numberStore = useNumber()
function changeState() {
  numberStore.incrementNum(10)
}

const homeStore = useHome()
// homeStore.fetchHomeMultidata()
homeStore.fetchHomeMultidata().then((res) => {
  console.log('fetchHomeMultidata的action已经完成了:', res)
})
</script>
<style scoped></style>