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>