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
• 创建挂载

import {creatrPinia} from 'pinia'
//创建Pinia实例
const pinia = createPinia()
//挂载到Vue根实例
app.use(pinia)

初始化配置

1. 定义并导出容器

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

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

解构访问pinia内部数据

pinia 数据不能直接解构赋值

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

如何解构赋值

引入方法 storeToRefs

import {storeToRefs} from 'pinia'
const {count} = storeToRefs(mainStore)

状态更新和Actions

1.直接修改

mainStore.count++

2.批量修改（性能优化，批量更新）

mainStore.$patch({
  count: mainStore.count+1,
  arr:[...mainStore.arr ,  4]
})

3.更好的批量更新方式

mainStore.$patch(state=>{
	state.count++
	state.arr.push(4)
})

4.通过actions，封装业务逻辑，修改state

actions: {
    changeState(num:number) {
        this.count+=num    
    }
}

Getters使用

类似于组件的conputed

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

pinia和devtools

可对状态进行管理