Vue-pinia状态管理

使用Pinia？

使用Pinia之前，我们需要先对其进行安装：
- npm install pinia
创建一个pinia并且将其传递给应用程序：

认识Store

什么是Store？
- 一个 Store （如 Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态；
- 它有点像始终存在，并且每个人都可以读取和写入的组件；
- 你可以在你的应用程序中定义任意数量的Store来管理你的状态；
Store有三个核心概念：
- state、getters、actions；
- 等同于组件的data、computed、methods；
- 一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性；

定义一个Store

定义一个Store：
- 我们需要知道 Store 是使用 defineStore() 定义的，
- 并且它需要一个唯一名称，作为第一个参数传递；
这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools
返回的函数统一使用useX作为命名方案，这是约定的规范；

使用定义的Store

Store在它被使用之前是不会创建的，我们可以通过调用use函数来使用Store：
注意Store获取到后不能被解构，那么会失去响应式：
- 为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。

APP.vue

<template>
  <div class="home">
    <h2>Home View</h2>
    <h2>count: {{ counterStore.count }}</h2>
    <h2>count: {{ count }}</h2>
    <button @click="incrementCount">count+1</button>
  </div>
</template>

<script setup>
  import { toRefs } from 'vue'
  import { storeToRefs } from 'pinia'
  import useCounter from '@/stores/counter';

  const counterStore = useCounter()

  // const { count } = toRefs(counterStore)
  const { count } = storeToRefs(counterStore)


  function incrementCount() {
    counterStore.count++
  }

</script>

<style scoped>
</style>

count.js

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

import useUser from './user'

const useCounter = defineStore("counter", {
  state: () => ({
    count: 99,
    friends: [
      { id: 111, name: "why" },
      { id: 112, name: "kobe" },
      { id: 113, name: "james" },
    ]
  }),
  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) {
      // 1.获取user信息
      const userStore = useUser()

      // 2.获取自己的信息

      // 3.拼接信息
      return `name:${userStore.name}-count:${state.count}`
    }
  },
  actions: {
    increment() {
      this.count++
    },
    incrementNum(num) {
      this.count += num
    }
  }
})

export default useCounter