關於vue3簡單狀態管理約定引發的思考

咬輪貓發表於2021-08-04
Vue

官方文件的程式碼是這樣的

export const store = {
  debug: true,

  state: reactive({
    message: 'Hello!'
  }),

  setMessageAction(newValue) {
    if (this.debug) {
      console.log('setMessageAction triggered with', newValue)
    }

    this.state.message = newValue
  },

  clearMessageAction() {
    if (this.debug) {
      console.log('clearMessageAction triggered')
    }

    this.state.message = ''
  }
}

當我使用的時候

    console.log(this.$store.state.message);
    this.$store.setMessageAction('你好');
    console.log(this.$store.state.message);

輸出的訊息是這樣的

Hello!
setMessageAction triggered with 你好
你好

這看起來沒什麼問題 但是當我這麼使用的時候

    console.log(this.$store.state.message);
    this.$store.state.message='你好';
    console.log(this.$store.state.message);

輸出的訊息是這樣

Hello!
你好

沒有警告 直接繞過了setMessageAction方法

看官網的介紹是約定而不是約束，這樣如果在它處修改狀態值，直接繞過set方法，可能會造成未知的後果

不知道是我理解錯了還是官網的意思就是讓我們自己進行約束，有知道的大佬還望告知一下，

貼一下我自己寫的約束程式碼 不知道是不是正確的路子

import { reactive, readonly } from 'vue';
const user_info: IUserInfo = reactive({
  user_name: '',
  system_code: '',
  cellphone: null,
  email: ''
});
export const store = {
  /**
   * @description: 獲取使用者資訊
   * @param {*}
   * @return {*}
   */
  getUserInfoAction(): IUserInfo {
    return readonly(user_info);
  },
  /**
   * @description: 設定使用者資訊
   * @param {string} user_name 使用者名稱
   * @param {string} system_code 系統編碼
   * @param {number} cellphone 手機號
   * @param {string} email 郵箱
   * @return {*}
   */
  setUserInfoAction(user_name: string, system_code: string, cellphone: number, email: string): void {
    user_info.user_name = user_name;
    user_info.system_code = system_code;
    user_info.cellphone = cellphone;
    user_info.email = email;
  },

}
/**
 * @description: userinfo資料結構
 * @param {string} user_name 使用者名稱
 * @param {string} system_code 系統編碼
 * @param {number} cellphone 手機號
 * @param {string} email 郵箱
 * @return {*}
 */
interface IUserInfo {
  user_name: string,
  system_code: string,
  cellphone: number,
  email: string
}

相關文章