vue3.0 状态管理pinia

js配置

import { defineStore } from 'pinia'

export const useState = defineStore({
  id: 'counter',
  state: () => ({
    title: '状态管理',
    counter:0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    stateAdd() {
      this.counter++
    },
    stateMinus() {
      this.counter--
    }
  }
})

 .vue文件引用

<script lang="ts" setup>
import {
Minus,
Plus,
} from '@element-plus/icons-vue'
import { useState } from '@/stores/state.js'

const state = useState()
// // 方式一，直接修改
// state.counter += 1
// // 方式二，如果修改多个数据，可以使用$patch批量修改
// state.$patch({
// counter: state.counter + 1
// })
// // 方式三： $patch一个函数
// state.$patch(state => {
// state.counter++
// })
// // 方式四，调用actions
// state.stateAdd()
// // 方式五，替换整个state,每个属性都要有
// state.$state = {
// title: '该变状态管理title',
// counter: 2
// }
// // 方式六：重置state
// state.$reset()
const minus = () => {
state.stateMinus()
}
const add = () => {
state.stateAdd()
}
</script>
<template>
  <h1>{{state.title}}</h1>
  <p>
    <el-icon @click="minus">
      <Minus />
    </el-icon>
    <span>{{state.counter}}</span>
    <el-icon @click="add">
      <Plus />
    </el-icon>
  </p>
</template>