state
import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
state:()=> {
return {
name: 'zs',
age: 18
}
},
getters: {
},
actions: {
setName(name:string) {
this.name = name
}
}
})
<template>
<div>
{{ user.name }}----{{ user.age }}
<button @click="change">改变值</button>
</div>
</template>
<script setup lang="ts">
import { useStore } from "./store";
const user = useStore();
// 第一种方式修改state
/* const change = () => {
useStore.name = '小黑'
} */
// 第二种方式 调用 $patch 方法,可以修改多个数据
/* const change = () => {
user.$patch({
name: "小黑",
age: 20,
});
}; */
// 第三种方式 $patch 方法也接受一个函数来批量修改
/* const change = () => {
user.$patch((state)=>{
state.name = '小黑'
state.age = 20
})
}; */
// 第四种方式 可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态
/* const change = () => {
user.$state = {
name: '小黑',
age: 20
}
}; */
// 第五种 使用 actions
const change = () => {
user.setName('小黑')
};
</script>
<style scoped></style>