Vue Router+Vuex는 백 상태 저장을 구현합니다.

이번에는 이전 상태 저장을 구현하기 위해 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 작업 브라우저 열기 및 닫기

js가 Canvas를 플러그인으로 캡슐화하는 방법

js는 비밀번호 강도 확인을 위해 정규식을 사용합니다.

위 내용은 Vue Router+Vuex는 백 상태 저장을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!