一、基本用法

1. 定義 Symbol 鍵名

// src/constants/symbols.js
export const USER_INFO = Symbol('user-info');

2. 在 Vuex getters 中使用

// src/store/index.js
import { USER_INFO } from '@/constants/symbols';

const store = new Vuex.Store({
  state: {
    user: { name: '張三', age: 20 }
  },
  getters: {
    [USER_INFO](state) {
      return state.user;
    }
  }
});

3. 在組件中映射為計算屬性

<script>
import { mapGetters } from 'vuex';
import { USER_INFO } from '@/constants/symbols';

export default {
  computed: {
    ...mapGetters({
      [USER_INFO]: USER_INFO
    })
  },
  created() {
    console.log(this[USER_INFO]); // { name: '張三', age: 20 }
  }
};
</script>

二、注意事項

1. Vue 2 響應式限制

• Vue 2 的響應式系統(tǒng)無法檢測 Symbol 作為鍵名的屬性變化。
• 解決方法：使用 Vue 3，或避免直接在 state 中使用 Symbol 鍵名。

2. 調(diào)試困難

• 在 Vue Devtools 中，Symbol 鍵名會顯示為 Symbol(描述符)，不易識別。
• 解決方法：為 Symbol 添加唯一且清晰的描述符。

3. 序列化問題

• 如果計算屬性需要被序列化（如存儲到 localStorage），Symbol 鍵名會被忽略。
• 解決方法：在序列化前將 Symbol 轉換為字符串。

三、佳實踐

1. 集中管理 Symbol

// src/constants/symbols.js
export const USER_INFO = Symbol('user-info');
export const TOKEN = Symbol('token');

2. 使用描述符提高可讀性

const USER_INFO = Symbol('user-info');
console.log(USER_INFO.description); // "user-info"

3. 避免在 v-for 中使用

四、總結

• Vue 2 兼容性：避免在響應式數(shù)據(jù)中使用 Symbol 鍵名。
• 調(diào)試和序列化：Symbol 鍵名在調(diào)試和序列化時存在不便。
• 佳實踐：集中管理 Symbol，使用清晰的描述符，優(yōu)先在非響應式場景中使用。