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

npm install pinia

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

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

<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>