pinia的简单使用

// 安装
// yarn add pinia
// 在main.js中
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

// 创建 src/store/index.js
import { defineStore } from 'pinia'
// 'main' : 容器名称，不能重复
export const mainStore = defineStore('main', {
    state: () => {
        return {
            user_name: 'test',
            count: 0,
        }
    },
    getters: {},
    actions: {},
})

// 应用在.vue文件中
// 1 引入该文件 import { mainStore } from '@/store/index'
const store = mainStore() // 在标签中直接引用 {{ store.user_name }}

// 2.1修改(只修改一个属性) state
store.user_name = 'test2' // 比vuex修改方便，简洁
// 坑
// const { user_name } = store // 通过解构的数据，只有一次作用，不是响应式数据
// 解决以上问题
import { storeToRefs } from 'pinia'
const { user_name } = storeToRefs(store) // 在标签中可直接使用 {{ user_name}}

// 2.2修改多个属性值 $patch 是经过优化的，会加快修改速度，对程序的性能有很大的好处
store.$patch({
    count: store.count + 1,
    user_name: 'hello',
})

// 2.3 加函数的形式修改状态数据 适合更加复杂的数据修改，比如数组、对象
store.$patch((state) => {
    state.count++
    state.user_name = 'hellow'
})

// 3 在action中写好逻辑, 再在调用aciton, getters 是有缓存特性的，假设在某组件中调用两次getters中的方法，只会被调用一次
export const mainStore2 = defineStore('main2', {
    state: () => {
        return {
            user_name: 'test',
            count: 0,
        }
    },
    getters: {
        getUserName(state) {
            // 也可以直接在方法中调用 this.user_name
            return '用户名：' + state.user_name
        },
    },
    actions: {
        // 在action中不能使用箭头函数，因为箭头函数绑定是外部的this
        changeState() {
            this.count++
            this.user_name = 'hellow'
        },
    },
})

// 在组件中调用action函数
store.changeState()

// 两个store 文件可以互相调用

// pinia 状态管理库
// 优势
// 1 可以对vue2 vue3 做到很好的支持
// 2 抛弃了mutations的操作，只有state, getters，actions 极大简化了状态管理库的使用，使代码更加直观
// 3 不需要嵌套模块，符合vue3的composition api，让代码更加扁平化
// 4 支持typescript, vuex 不完全支持ts
// 5 代码更加简洁，可以实现很好的代码自动分割

学习地址： https://www.jspang.com/article/82