이번에는 이전 상태 저장을 구현하기 위해 Vue Router+Vuex를 가져오겠습니다. Vue Router+Vuex가 이전 버전 상태 저장을 구현하기 위해 구현하는 notes는 무엇입니까? 다음은 실제 사례입니다.
죄송합니다. 제목이 좀 길었습니다. 이번에는 운영 계정이 비교적 세부적인 내용이므로 아래에서 자세히 살펴보겠습니다.
수요 1개
최근에 전자 vue를 사용하여 크로스 플랫폼 데스크톱 소프트웨어를 개발했습니다. 몇 페이지를 손으로 쓰기 시작했는데 문제가 발생했습니다. 데스크톱 소프트웨어에는 일반적으로 navigation 요구 사항
이 있습니다. 돌아가기 버튼을 클릭하면 이전 페이지로 돌아가고 이전 페이지의 내용이 표시됩니다. 실제로 앱뿐만 아니라 일반 웹 페이지에도 이러한 요구 사항이 있습니다. 특히 vue를 사용하여 SPA를 작성할 때 더욱 그렇습니다.
프로젝트 탐색에서는 거의 항상 router.push({name: 'xxx', params: {xxx:123...}}) 이쪽으로. 이 접근 방식으로 인해 발생하는 직접적인 문제는 다음과 같습니다. 뒤로 버튼을 클릭할 때(호출 router.go(-1)), URL만 기록에 저장되고 paramsobject가 손실되어 params에 의존하는 페이지 렌더링 예외가 발생합니다.
2 솔루션
사실 아이디어는 매우 간단합니다. 백업 작업 중에 매개변수가 손실되므로 자연스럽게 매개변수를 저장하는 방법을 생각해 보겠습니다. 그렇죠, 너무 무례한 일이군요. 버리고 싶으시니 제가 보관해 두겠습니다!
저장 방법: 사실 고민할 필요는 없습니다. 이는 컴포넌트 간 통신 문제이므로 당연히 Vuex를 사용하여 저장하는 것이 가장 상식입니다!
저장 시기: 첫 번째 반응은 router.push({name: 'xxx', params: {xxx:123...}}), 이 URL로 다시 탐색하고 매개변수가 없으면 vuex에서 저장해 보세요. 매장에서 픽업하세요. 맞는 것 같긴 한데 좀 귀찮네요! ! 당황하지 마세요. 탐색 후크 라우터가 있습니다.before각((to, from, next) => { // ... }) 아!
이름에서 알 수 있듯이 vue-router에서 제공하는 탐색 후크는 주로 탐색을 가로채서 점프 또는 취소를 완료하는 데 사용됩니다.
이 시점에서 여러분은 내 솔루션을 완전히 이해해야 하므로 아래에서는 말도 안되는 이야기를 하지 않겠습니다. 코드로 넘어가겠습니다.
/* Vuex store 定义存储对象RouterParams */ //... const state = { //定义一个存储map,key:导航name,value:导航params paramMap: {} } const mutations = { REFRESHPARAM (state, paramKV) { //mutation,应该能看懂做的操作吧? Vue.set(state.paramMap, paramKV.key, paramKV.value) } } //...
/* router中设置一个全局导航钩子 */ const router = new VueRouter({ ... }) //router router.beforeEach((to, from, next) => { // 只有在找不到params时才"出此下策" if (Object.keys(to.params).length === 0) { // 从store中取出付给params,此处注意路径未必完全吻合,以你的为准 Object.assign(to.params, store.state.RouterParams.paramMap[to.name] || {}) } // 存储一下params备用 store.commit('REFRESHPARAM', {key: to.name, value: to.params}) next() // 千万不要忘了,否则导航会被“掐死”在这儿。:-D }) //...
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 얻으려면, PHP 중국어 웹사이트 기사에서 다른 관련 주제에 주목하세요!
추천 자료:
js는 비밀번호 강도 확인을 위해 정규식을 사용합니다.
위 내용은 Vue Router+Vuex는 백 상태 저장을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!