pinia的基本使用

• 没有mutation、没有嵌套模块，相对vuex对ts有更好的支持

点我看官网链接

一、安装

npm install pinia

二、初始化配置

src\main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'

// 创建pinia实例
const pinia = createPinia()

const app = createApp(App)

// 挂载到vue根实例
app.use(pinia)
app.mount('#app')

三、基本使用

3.1创建store并使用state的值

• src\store\index.ts

import { defineStore } from "pinia";

// 1.定义并导出容器
//参数1:容器的ID,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值:一个函数,调用得到容器实例
export const useMainStore = defineStore('main', {
    /**
     * 类似组件的data,用来储存全局状态的
     * 1.必须是函数:这样是为了服务端渲染的时候避免交叉请求导致的数据状态污染
     * 2.必须是箭头函数
     */
    state: () => {
        return {
            count: 19
        }
    },
    /**
     * 类似于组件的computed,用来封装计算属性,有缓存的功能
     */
    getters: {},
    /**
     * 类似于组件的methods,封装业务逻辑,修改state
     */
    actions: {}
})

• src\components\HelloWorld.vue
• 注意直接不要解构拿值,否则不是响应式,要使用官方的storeToRefs()

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store/index";
const mainStore = useMainStore();
const { count } = storeToRefs(mainStore);
console.log(mainStore.count);
const handleChangState = () => {
  mainStore.count++;
};
</script>

<template>
  {{ mainStore.count }}=============={{ count }}
  <button @click="handleChangState">按钮</button>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

3.2状态更新与actions

• 多个数据修改的情况下,使用$patch进行批量修改性能好

src\store\index.ts

import { defineStore } from "pinia";

// 1.定义并导出容器
//参数1:容器的ID,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值:一个函数,调用得到容器实例
export const useMainStore = defineStore('main', {
    /**
     * 类似组件的data,用来储存全局状态的
     * 1.必须是函数:这样是为了服务端渲染的时候避免交叉请求导致的数据状态污染
     * 2.必须是箭头函数
     */
    state: () => {
        return {
            count: 19
        }
    },
    /**
     * 类似于组件的computed,用来封装计算属性,有缓存的功能
     */
    getters: {},
    /**
     * 类似于组件的methods,封装业务逻辑,修改state
     */
    actions: {
        handleState(num: number) {
            this.count += num
        }
    }
})

src\components\HelloWorld.vue

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store/index";
const mainStore = useMainStore();
const { count } = storeToRefs(mainStore);
const handleChangState = () => {
  // 方法一:
  // mainStore.count++;
  // 方法二:
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  // });
  // 方法三:
  // mainStore.$patch((state) => {
  //   state.count++;
  // });
  // 方法四:
  mainStore.handleState(10);
};
</script>

<template>
  {{ mainStore.count }}=============={{ count }}
  <button @click="handleChangState">按钮</button>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

3.3getters

src\store\index.ts

import { defineStore } from "pinia";

// 1.定义并导出容器
//参数1:容器的ID,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值:一个函数,调用得到容器实例
export const useMainStore = defineStore('main', {
    /**
     * 类似组件的data,用来储存全局状态的
     * 1.必须是函数:这样是为了服务端渲染的时候避免交叉请求导致的数据状态污染
     * 2.必须是箭头函数
     */
    state: () => {
        return {
            count: 19
        }
    },
    /**
     * 类似于组件的computed,用来封装计算属性,有缓存的功能
     */
    getters: {
        count10(state) {
            console.log('看一下有没有被缓存')
            return state.count + 10
        }
    },
    /**
     * 类似于组件的methods,封装业务逻辑,修改state
     */
    actions: {
    }
})

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store/index";
const mainStore = useMainStore();
</script>

<template>
  {{ mainStore.count10 }}
  {{ mainStore.count10 }}
  {{ mainStore.count10 }}
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>