【Vue3+TypeScript】CRM系统项目搭建之 — 状态管理

HelloWorldZ

发布于 2024-03-20 19:12:42

710

发布于 2024-03-20 19:12:42

文章被收录于专栏：前端开发前端开发

前面完成了路由的基本的配置工作，现在进行项目的状态管理的配置，这里使用到的是 pinia 工具

安装

npm install pinia

使用

store / index.ts

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

简单使用

store / counter.ts

import { defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 100
  }),
  getters: {
    double(state) {
      return state.counter * 2
    }
  },
  actions: {
    changeCounterAction(newNum: number) {
      this.counter = newNum
    }
  }
})

export default useCounterStore

Main.vue

<script setup lang="ts">
import useCounterStore from '@/store/counter'

const counterStore = useCounterStore()

const changeCounter = () => {
  counterStore.changeCounterAction(15)
}
</script>

<template>
  {{ counterStore.counter }}-{{ counterStore.double }}
  <button @click="changeCounter">改变</button>
</template>

<style scoped></style>

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

crm