状态管理工具pinia的使用

状态管理工具pinia的使用

1、创建一个store文件夹，存放状态管理的文件

2、在store文件夹下创建一个modules文件夹，存放各个模块状态

3、创建store-namespace.ts文件，用于存放所有状态id常量

export const enum Names {
    App = 'App'
}

4、定义状态仓库（组合api写法）

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import {Names} from '../../store-namespace'
// 写法有很多中，自己喜欢那种就是用那种就好
// 下面由写法大家可以自行查看
const useAppStore = defineStore(Names.App, () => {
	// 定义state
    let num:number = ref(0)
    // 定义actions
    const add = () => {
        num.value++
    }
    // 定义getters
    const doubleNum = computed(() => num.value * 2);
    return {
        user,
        add,
        doubleNum
    }
})
export default useAppStore

5、在main.ts中引入全局

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

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

6、在页面中使用仓库中的状态

<template>
    <div>{{store.num}}</div>
    <button @click="handleAddAndSub">加减<button>
</template>

<script setup lang="ts">
// 解决pinia数据解构后失去响应式问题
import { storeToRefs } from 'pinia';
import { useAppStore } from './store/useAppStore/useAppStore';
const store = useAppStore();
const { num } = storeToRefs(store);
const handleAddAndSub = () => {
    store.add();
};
</script>

pinia集中不同写法

1、写成上述函数式的

2、options的写法

import { defineStore } from 'pinia'
import {Names} from '../../store-namespace'

export const useAppStore = defineStore({
  id: Names.App,
  state: () => ({
      num:number: 0
  }),
  // actions中的代码可以是同步也可以是异步
  actions: {
 	// 这种写法不建议写成箭头函数，写成箭头函数访问不到state中的状态
    add() {
      this.num++
    }
  }，
  getters: {
    doubleNum(state) {
      return state.num * 2;
    }
  }
})

3、与上述写法就是id存在位置不同

import { defineStore } from 'pinia'
import {Names} from '../../store-namespace'

export const useAppStore = defineStore(Names.App, {
  state: () => {
    return { num: 0 }
  },
  actions: {
    add() {
      this.num++
    },
  },
  getters: {
    doubleNum(state) {
      return state.num * 2;
    }
  }
})