defineStore 通俗介绍

📦 简单比喻 ★

defineStore 就像是开一个公共储物柜：

1. 开店：defineStore() 开一个储物柜店
2. 放东西：在储物柜里放各种东西（数据）
3. 大家共用：所有人都能存取
4. 自动通知：一个人拿了或存了东西，其他人会立即知道

🎯 核心作用 ★

集中放东西，大家都能用

💡 举个生活例子

开一个小卖部

// 1. 开小卖部（定义仓库）
const 小卖部 = defineStore('xiaomaibu', {
  // 店里有什么货
  货物: {
    可乐: 10,
    薯片: 20,
    糖果: 30
  },

  // 自动计算
  计算: {
    总货物数: () => 可乐 + 薯片 + 糖果
  },

  // 操作方法
  操作: {
    卖货(货品) {
      this.货物[货品]--  // 卖掉一个
    },

    进货(货品, 数量) {
      this.货物[货品] += 数量
    }
  }
})

大家来买东西

// 2. 顾客A来买东西
const 顾客A = 小卖部()
顾客A.卖货('可乐')  // 可乐变成9

// 3. 顾客B也来买东西
const 顾客B = 小卖部()
console.log(顾客B.货物.可乐)  // 看到可乐是9，不是10
// 因为顾客A刚买过

🔧 在代码中看

// 定义一个"计数器"储物柜
const 用计数器 = defineStore('jishuqi', {
  // 里面放的东西
  状态: () => ({
    数字: 0
  }),

  // 自动计算的东西
  计算器: {
    两倍数字: (状态) => 状态.数字 * 2
  },

  // 操作方法
  动作: {
    加一() {
      this.数字++  // 数字加1
    },

    重置() {
      this.数字 = 0
    }
  }
})

// 小明使用
const 小明 = 用计数器()
小明.加一()  // 数字变成1

// 小红使用
const 小红 = 用计数器()
console.log(小红.数字)  // 看到1，不是0
// 因为小明刚刚加过

📊 为什么需要这个？

💡 实际应用场景

用户登录信息

// 用户信息"储物柜"
const 用户仓库 = defineStore('yonghu', {
  状态: () => ({
    用户名: '',
    已登录: false
  }),

  动作: {
    登录(名字) {
      this.用户名 = 名字
      this.已登录 = true
    },

    退出() {
      this.用户名 = ''
      this.已登录 = false
    }
  }
})

// 登录页面
用户仓库().登录('小明')

// 其他页面
if (用户仓库().已登录) {
  console.log('欢迎回来，' + 用户仓库().用户名)
}

🆚 传统方法对比

以前的方法（麻烦）

// 每个组件自己记
组件A.用户名 = '小明'

// 组件B想知道
// 怎么办？传过去？太麻烦！

现在的方法（方便）

// 放储物柜
defineStore().用户名 = '小明'

// 任何组件想看
console.log(defineStore().用户名)  // 直接看

🔄 在网页中的应用

<!-- 页面1：登录 -->
<button @click="登录()">登录</button>

<!-- 页面2：显示 -->
<div>欢迎 {{ 用户.用户名 }}</div>

<script>
// 两个页面共享数据
const 用户 = 用户仓库()

function 登录() {
  用户.登录('张三')
}
</script>

🎯 三个关键词

1. 🛅 存：把数据存进去
2. 👀 看：随时查看数据
3. 🔄 变：数据变了，所有地方自动更新

💡 一句话理解

defineStore 就是开一个”公共储物柜”，大家把要共享的东西放进去，谁都能用，谁改了大家都知道。