官方文档的代码是这样的
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
}