// 安装 // 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
标签:const,name,简单,state,user,pinia,使用,store From: https://www.cnblogs.com/mengdiezhuangzhou/p/17010814.html