快速上手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)
    }
}