目 录CONTENT

文章目录

pinia的使用

Administrator
2022-04-28 / 0 评论 / 0 点赞 / 49 阅读 / 6306 字

pinia的使用

fe13aa9b39484dedb11826d77251ceb0tplvk3u1fbpfcpzoomcropmark130413041304734.png

Pinia优势

Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐

  1. Vue2 和 Vue3 都能支持
  2. 抛弃传统的 Mutation ,只有 state, getteraction ,简化状态管理库
  3. 不需要嵌套模块,符合 Vue3 的 Composition api,让代码扁平化
  4. TypeScript支持
  5. 代码简介,很好的代码自动分割

Pinia 基本使用

初始化项目: npm init vite@latest

安装Pinia: npm i pinia

挂载Pinia
8c8d5e3fde9b40c49963bff8bb80cb66tplvk3u1fbpfcpzoomincropmark1304000.png

创建Store
image.png

使用Store

image.png

解构store

当store中的多个参数需要被使用到的时候,为了更简洁的使用这些变量,我们通常采用结构的方式一次性获取所有的变量名

ES传统方式解构(能获取到值,但是不具有响应性)

f080f0d53a054a67b54878d3d0791f2dtplvk3u1fbpfcpzoomincropmark1304000.png

Pinia解构方法:storeToRefs

821275676927405188b9be39b05806c8tplvk3u1fbpfcpzoomincropmark1304000.png

Pinia修改数据状态

简单数据修改

简单数据直接通过在方法中操作 store.属性名 来修改

const addOne = () => {
  store.count++;
}

多条数据修改

通过基础数据修改方式去修改多条数据也是可行的,但是在 pinia 官网中,已经明确表示$patch 的方式是经过优化的,会加快修改速度,对性能有很大好处,所以在进行多条数据修改的时候,更推荐使用 $patch

$patch 方法可以接受两个类型的参数,函数 和 对象

  • $patch + 对象
  • $patch + 函数: 通过函数方式去使用的时候,函数接受一个 state 的参数,state 就是 store 仓库中的 state
const onObjecClick = () => {
  store.$patch({
    msg: '修改多条数据',
    count: ~~(Math.random() * 100)
  })
}

通过action修改

  1. Store.actions中添加 changeState 方法

    //src/store/index.js
    import { defineStore } from "pinia";
    
    export const mainStore = defineStore("main", {
        state: () => {
            return {
                count: 0,
                msg: "hello wolrd"
            }
        },
        actions: {
            changeMsg() {
                this.msg = "我是标哥哥";
            },
            changeCount() {
                this.count = ~~(Math.random() * 100);
            }
    
        },
        getters: {
        },
    })
    
  2. 组件方法调用 store.方法名

    const actionClick = () => {
      store.changeMsg();
      store.changeCount();
    }
    

Pinia中的Getters

Pinia 中的 getter 和 Vue 中的计算属性几乎一样,在获取 State值之前做一些逻辑处理

getter 中的值有缓存特性,如果值没有改变,多次使用也只会调用一次

  1. 添加 getter方法

    //src/store/index.js
    import { defineStore } from "pinia";
    
    export const mainStore = defineStore("main", {
        state: () => {
            return {
                count: 0,
                msg: "hello wolrd"
            }
        },
        actions: {
            changeMsg() {
                this.msg = "我是标哥哥";
            },
            changeCount() {
                this.count = ~~(Math.random() * 100);
            }
    
        },
        getters: {
            getMsgAndCount(state) {
                return state.msg + "###" + state.count;
            }
        },
    })
    
  2. 组件内多次调用

     <h1>{{ store.count }}----{{store.msg}}-----{{store.getMsgAndCount}}</h1>
     <h1>{{ store.count }}----{{store.msg}}-----{{store.getMsgAndCount}}</h1>
     <h1>{{ store.count }}----{{store.msg}}-----{{store.getMsgAndCount}}</h1>
    

getter 中不仅可以传递 state 直接改变数据状态,还可以使用 this 来改变数据

123

store之间的相互调用

在 Pinia 中,可以在一个 storeimport 另外一个 store ,然后通过调用引入 store 方法的形式,获取引入 store 的状态

  1. 新建 store

7c9eef2dddc64924b0f60c90160f2abbtplvk3u1fbpfcpzoomincropmark1304000.png

  1. 在原 store 中引入 allanStore,并获取 moveList

effd4216b8a24d01814bb80af2d2a515tplvk3u1fbpfcpzoomincropmark1304000.png

  1. 组件中使用 mainStore.getAllanStoreList

14d33eb3fede4f1297e8debf1715e223tplvk3u1fbpfcpzoomincropmark1304000.png

总结

总得来说,Pinia 就是 Vuex 的替代版,可以更好的兼容 Vue2,Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation,只保留了 state, getter和action。Pinia拥有更简洁的语法, 扁平化的代码编排,符合Vue3 的 Composition api

0

评论区