Vue实现⼿动刷新组件的⽅法
开发过程遇到了⼀个问题，就是我的 router-view ⾥⾯渲染出来的组件输⼊数据之后，我点击路由视图外边的导航栏 router-link 按钮，可以实现清除 router-view ⾥⾯的数据，也就是使组件重新渲染。vm.$forceUpdate()这个⽅法可以使当前组件调⽤这个⽅法时，重新渲染组件。给 router-view 标签添加 key 属性将 key 绑定的值放在状态管理容器⾥⾯，通过状态管理容器的mutations 或者 actions 触发 key 值的变化，即可实现重新渲染组件的⽬的。相关实现代码如下
// store/view.js
const state = {
viewId: 1
};
const getters = {
getViewId: state => {
return state.viewId;
}
};
const mutations = {
setViewId: (state, payload) => {
state.viewId++;react router 方法
}
};
const actions = {
setViewId: (context, payload) => {
contextmit("setViewId", payload);
}
};
export default {
namespaced: true,
state,
getters,
mutations,
actions
};
放置 router-view 标签的Layout 组件
触发 viewid，使 router-view 对应的路由组件刷新的地⽅,⽐如导航栏组件。
methods: {
fresh() {
this.$store.dispatch("view/setViewId")
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。