Vue3-Pinia基本使用

什么是Pinia呢？

        Pinia开始于大概2019，是一个状态管理的库，用于跨组件、页面进行状态共享（这和Vuex、Redux一样）,用起来像组合式API（Composition API）

        1、更友好的TpeScipt支持，Vuex之前对Ts的支持很不友好

        2、比如mutations不再存在

        3、不在有modules的嵌套结构

                 你可以灵活使用每一个store，他们是通过扁平化的方式来相互使用的

        4、不在有命名空间的概念，不在需要记住他们的复杂关系

 （一）安装pinia

yarn add pinia

npm install pinia

 （二）引入pinia

1、创建store文件夹中的index.js文件引入创建pinia，抛出全局使用

2、在main.js导入使用

认识和定义State 

        pinia的状态管理：不同状态可以区分不同文件

1、创建counter.js

3、引入counter.js，获取pinia的值，在模板中直接使用

4、对象解构的值，可以使用toResf或者pinia自带的storeToRefs来实现响应式数据

效果如图所示：

pinia提供了一些api修改状态

改变state

除了直接用 counterStore.counter++ 修改 store，你还可以调用 $patch 方法。 它允许您使用部分“state”对象同时应用多个更改：

counterStore.$patch({
  counter: store.counter + 1,
  name: 'Abalam',
})

替换state

您可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态：

counterStore.$state = {
    name: "ming",
    age: 18
}

重置state

您可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值：

counterStore.$reset()

认识和定义Getters

        getters相当于Store的计算属性：

                 1、它们可用defineStore()中的getters属性定义

                2、getters中可以定义接受一个state作为参数的函数

import { defineStore } from "pinia";
import UseUser from "./user";
const useCounter = defineStore("counter", {
    state: () => ({
        count: 99,
        info: [
            { id: 1, name: "code" },
            { id: 2, name: "why" },
        ]
    }),
    getters: {
        // 对数据进行操作
        edit(state) {
            return state.count * 2
        },
        // 可以使用this来访问当前的store实例中getters
        editAddOne() {
            return this.edit + 1
        },
        // 根据id查找数据
        getInfoByid(state) {
            return function (id) {
                for (let i = 0; i < state.info.length; i++) {
                    const info = state.info[i];
                    if (info.id === id) {
                        return info
                    }
                }
            }
        },
        // 引入其他模板的数据进行使用
        splicing(state) {
            const userStore = UseUser()
            return `name:${userStore.name}--age:${state.count}`
        }

    }
})

export default useCounter

引入使用getters

  

认识和定义Actions

         Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑：

import { defineStore } from "pinia";
const UseUser = defineStore("user", {
    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 UseUser

 效果如图所示：