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>