高性能网站开发 书籍,中小企业网络组建,运城网站开发app,网站可信度前情提要#xff1a;主页面有个日期选择框#xff0c;选择某个日期之后#xff0c;从主页面点击超链接跳转到其他页面再返回的时候#xff0c;日期又回到初始值而不是我选择的那个值#xff0c;这就涉及到属性的状态管理即vuex#xff0c;也是我们常说的store 关于vuex我… 前情提要主页面有个日期选择框选择某个日期之后从主页面点击超链接跳转到其他页面再返回的时候日期又回到初始值而不是我选择的那个值这就涉及到属性的状态管理即vuex也是我们常说的store 关于vuex我这里不再赘述感兴趣的小伙伴建议去官网了解https://vuex.vuejs.org/zh/ 针对上述具体的场景我们来简单实现一下参数状态的共享与同步
定义store库 创建一个store.ts文件在里面写入以下内容
import { defineStore } from pinia;
export const Store defineStore({id: Store, //为状态存储指定一个唯一的标识符// 定义我们要共享状态属性info_date通过store实现在各个页面的共用state: () ({info_date:new Date()}),// 在getters里面定义获取相关状态属性的方法getters:{getInfoDate(): any {return this.info_date;},},// 在actions里面提交我们的状态变更actions: {setInfoDate(value: any): any {this.info_date value;},},
});主页面设置日期
script langts setupimport { ref, watch } from vue;
import { Store } from ./store; //引入我们定义的storeconst theStore Store(); // 创建store对象
// monthValue是日期框绑定的值
const monthValue ref(theStore.info_date); // 获取store里面的info_date的值作为monthValue的初始化值// 监控monthValue值的变化同步更新store里面info_date的状态
watch(monthValue,(newValue){theStore.setInfoDate(newValue); //newValue是日期框选择的值我们赋给store里面的info_date这样其他页面获取的info_date是这里更新之后的值达到了info_date共享的目的
}) /script注 store里面属性的使用如上述所见store对象.属性比如theStore.info_date其他页面使用同理 store里面属性的状态更新如上述所示theStore.setInfoDate(新值)其他页面更新同理
