快速上手pinia状态管理

Pinia介绍

去除掉Vuex中的Mutations,只有state,getters和actions,体积小,写法简单方便,更好的支持TypeScript语法,便捷的devTools操作。

pinia安装,可以使用npm或者yarn

yarn add pinia
npm install pinia

在main.ts中注册

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp(App);

app.use(pinia);
app.mount("#app");

在src目录下面创建一个store/index.ts文件

引入defineStore函数,该函数的第一个参数是id,相当于Vuex中的模块名,第二个参数是实例对象
state是一个函数,需要返回一个对象

import { defineStore } from "pinia";
export const mainStore = defineStore("main", {
    state: () => {
        return {
            count: 0,
            helloWorld: 'studyTS'
        };
    },
    getters: {},
    actions: {},
});

展示store中state的值

如果需要采用结构的方式获取store的值,可以引用storeToRefs函数来解构store。

import { storeToRefs } from "pinia";
import { mainStore } from "@/store/index";
const store = mainStore();
const { count } = storeToRefs(store);

改变state中的值方法有以下几种

1、单只需要改变state一个值时,可以直接修改,无需额外api

const handleClick = () => {
    store.count++
}

2、第二种方法$patch适合与多状态同时改变

const handleClickPatch = () => {
    store.$patch({
        count: store.count + 2,
        helloWorld: store.helloWorld == "studyTS" ? "Hello World" : "studyTS",
    });
}

3、第三种方法$patch传递函数,适用于处理复杂逻辑

const handleClickMethod = () => {
    //patch中的参数state就等于store中的state
    store.$patch((state) => {
        state.count++;
        state.helloWorld = state.helloWorld == "studyTS" ? "Hello World" : "studyTS";
    });
}

4、第四种方法调用store中的actions
actions可以是异步的,可以配置await实现相关逻辑,actions中不能使用箭头函数,这样就不会拿不到当前state里面的值

const handleClickActions = () => {
    store.changeState();
}
//store
actions: {
    //不能使用箭头函数
    changeState() {
        this.count++;
        this.helloWorld = "studyTS";
    },
},

5、第五种方法重置state

const handleResetState = () => {
    store.$reset()
}

Getters是store中的计算属性,具有缓存性,官方推荐使用箭头函数。

store

export const mainStore = defineStore("main", {
    state: () => {
        return {
            phone: "13546789453",
            numList: [ 1, 2, 3, 4]
        }
    },
    getters: {
        phoneHidden: state => state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
    },
})

在页面只需要改变state中phone的值,getter就会监听到phone值,从而返回新的值,跟computed功能一样。

<div>{{ phoneHidden }}</div>
<button @click="handleClickChangePhone">修改电话号码</button>

import { mainStore } from "@/store/index";
import { storeToRefs } from "pinia";
const store = mainStore();
const { phoneHidden, numList } = storeToRefs(store);

const handleClickChangePhone = () => {
    store.phone = "13123467525";
}

当然,也可以向getters传递参数,这时候就需要return一个函数在return其结果,类似computed传参

<div>{{ findNum(2) }}</div>

// store, 此时的numList用的是上面store里面的
getters: {
    //state就是store中的state
    findNum: state => {
        //num就是传递过来的参数
        return num => state.numList.find(item => item == num)
    }
},

store中不同文件相互访问

在strore下面新建一个square.ts

export const squareStore = defineStore("square", {
    state: () => {
        return {
            danceType: "广场舞",
        }
    }
})
//在index.ts中引入
import { squareStore } from "./square";
//然后在对应的方法中调用squareStore(),这样就能访问到squareStore中的方法与state的值,例如:
getters: {
    getSquareStore: () => {
        console.log(squareStore().danceType)
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值