pinia 介绍及使用

pinia介绍

1.pinia的基本介绍

pinia是vue的全局状态管理工具,与vuex使用方式类似,store 是状态和业务逻辑的实体:state 类似组件的data,getters 类似组件的computed,actions类似组件的methods。

2.pinia与vuex 的区别

  1. pinia没有vuex的mutations
  2. pinia没有空间命名模块
  3. 更好支持typeScript

3.pinia的优势

  1. vue2和vue3 都支持
  2. 支持devtools
  3. 模块热更新
  4. 支持使用插件扩展pinia功能
  5. 比vuex更好支持typeScript
  6. 支持服务端渲染

pinia的基本使用

1.安装

  • npm install pinia
  • 创建挂载
javascript 复制代码
import {creatrPinia} from 'pinia'
//创建Pinia实例
const pinia = createPinia()
//挂载到Vue根实例
app.use(pinia)

初始化配置

1. 定义并导出容器

javascript 复制代码
src/store/index.ts
import {defineStore} from 'pinia'

// 参数1:容器的ID,必须唯一,将来Pinia会把所有的容器挂载到跟容器中
// 参数2:options对象
export const useStore = defineStore('main',{
    // 存储全局状态
    state: ()=>{
        return {
            count:0        
        }    
    },
    // 封装计算属性,有缓存
    getters:{},
    // 封装业务逻辑
    actions:{}
})

2. 使用容器中的state

javascript 复制代码
HelloWorld.vue
<div>{{mainStore.count}}</div>
import {useStore} from '../store'
const mainStore = useStore()

解构访问pinia内部数据

pinia 数据不能直接解构赋值

例如const {count} = mainStore; 只能获取初始值,内容不是响应式的,是一次性的

如何解构赋值

引入方法 storeToRefs

javascript 复制代码
import {storeToRefs} from 'pinia'
const {count} = storeToRefs(mainStore)

状态更新和Actions

1.直接修改

mainStore.count++

2.批量修改(性能优化,批量更新)
javascript 复制代码
mainStore.$patch({
  count: mainStore.count+1,
  arr:[...mainStore.arr ,  4]
})
3.更好的批量更新方式
javascript 复制代码
mainStore.$patch(state=>{
	state.count++
	state.arr.push(4)
})
4.通过actions,封装业务逻辑,修改state
javascript 复制代码
actions: {
    changeState(num:number) {
        this.count+=num    
    }
}

Getters使用

类似于组件的conputed

javascript 复制代码
getters:{
    count10(state) {
        return state.count + 10;    
    }
    如果使用this必须指定返回值类型
    count10 (): number {
        return this.count +10;    
    }
}

pinia和devtools

可对状态进行管理

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站