首页 > 其他分享 >pinia的简单使用

pinia的简单使用

时间:2022-12-28 17:24:02浏览次数:56  
标签:const name 简单 state user pinia 使用 store

// 安装
// 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

相关文章

  • vue+nuxtJs+vue-monaco制作Monaco Editor编辑器(插件有bug不推荐使用)
    目录前言一、版本二、使用前配置1.插件注册文件2.nuxt.config.js三、使用四、插件bug五、附录1.kind提示图标类型2.默认action前言建议别用,有bug;后续写个不用vue-monaco......
  • vue3封装axios并使用拦截器处理错误
    utils/http.jsimportaxiosfrom"axios";consthttp=axios.create({withCredentials:false,timeout:30000,baseURL:"http://127.0.0.1:8000",header......
  • linux系统下安装Docker,以及Docker的基本使用
    DockerCE支持64位版本CentOS7,并且要求内核版本不低于3.10,CentOS7满足最低内核的要求,所以我们在CentOS7安装Docker。  1、卸载旧版本如果之前安装过旧版本......
  • python 使用thread多线程执行耗时代码
    python使用thread多线程执行耗时代码1、引入所需要的包importqueueimportthreadingimporttraceback2、定义线程类:classThreadService(threading.Thread):  de......
  • tensorflow_probability.python.bijectors的一些使用
      网上见到一个TensorFlow的代码,没见过这个形式的,是概率编程的代码:#coding=utf-8#Copyright2020TheTF-AgentsAuthors.##LicensedundertheApacheLicens......
  • 静态页面使用高德地图
    首先官网申请key和密钥引入高德地图js  js中初始化地图 具体的操作可查看官网https://lbs.amap.com/demo/jsapi-v2/example/event/event-state......
  • vue 使用 antv/g2
    效果:安装: npminstall@antv/g2--save引入:import{Chart}from'@antv/g2';使用:<divid="c1"></div>LeftChart(){constchart=newCha......
  • vue3使用sweetalert2替代默认的alert/confirm框
    安装#运行时依赖package.json的dependenciesnpminstallsweetalert2--save#开发时依赖package.json的devDependenciesnpminstallsweetalert2--save-dev ......
  • uTools 效率工具集 使用教程
    前言uTools是一款基于electron开发的工具集软件,通过快捷唤醒搜索,直接打开各种功能,非常方便。uToolsuTools是一个极简、插件化、跨平台的现代化桌面软件。通过自由选配丰富......
  • 使用DataSecurity Plus监控Windows文件完整性
    使用我们的文件完整性监控软件DataSecurityPlus,与精明的黑客,突发的恶意软件爆发以及挑战法规要求进行战斗。这种先进的工具还有助于生成可操作的报表,提供基于严重性的告警,......