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

可对状态进行管理

相关推荐
中微子1 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina5 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8162 小时前
scroll-marker轮播组件不再难
前端·css