vuex를 사용하여 메뉴 관리를 구현하는 방법

이 글은 주로 메뉴 관리를 위해 vuex를 사용하는 것에 대한 자세한 설명을 소개하고 참고용으로 제공합니다.

vuex의 장점은 복잡한 상태 관리에서만 실현될 수 있습니다.

프로젝트에 여러 레벨의 메뉴가 있고 동일한 레벨의 여러 메뉴가 서로 다른 구성 요소에 흩어져 있는 경우 프로젝트에서 메뉴가 이동할 때 동시에 각 메뉴 레벨의 강조 표시가 하나만 나타납니다. , 라우팅 변경과 함께 해당 메뉴도 강조 표시되어야 합니다(이전 강조 표시되지 않은 상태로 복원). 이는 vuex를 사용하기 위한 완벽한 시나리오입니다.

간단한 메뉴 관리를 위해 DOM 작업 사용

메뉴 관리를 위해 DOM을 사용하는 아이디어는 메뉴를 클릭할 때 이벤트 개체를 이벤트 핸들러에 전달하고 현재 강조 표시된 메뉴를 강조 표시하지 않는 것입니다. 클릭한 메뉴를 강조 표시합니다.

<p class="menu-url">
 <span class="active userList" @click="menuClicked($event, &#39;userList&#39;)">注册</span>
 <span class="chargeList" @click="menuClicked($event, &#39;chargeList&#39;)">充值</span>
 <span class="buyList" @click="menuClicked($event, &#39;buyList&#39;)">购买</span>
 <span class="bangList" @click="menuClicked($event, &#39;bangList&#39;)">到期</span>
 <span class="withDrawList" @click="menuClicked($event, &#39;withDrawList&#39;)">提现</span>
</p>

menuClicked (event, url) {
 // 当前高亮的 menu 非高亮
 const currentActiveLink = this.querySelector('.active');
 currentActiveLink.classList.remove('active');
 // 当前点击的 menu 高亮
 event.target.classList.add('active');
 // 路由跳转
 this.$router.push(`/panel/list/${url}`);
},

전환을 클릭하면 메뉴가 강조 표시되지만 버그가 있습니다. 이때 초기화할 때마다 기본 메뉴가 강조 표시되지 않은 메뉴에서 사용자가 수동으로 페이지를 새로 고치면 메뉴 강조가 발생합니다. 오류(예를 들어 구매 목록 페이지를 새로 고친 후에도 페이지 콘텐츠는 여전히 구매 목록에 남아 있지만 강조 표시된 메뉴는 사용자 목록으로 변경됩니다.)

이 버그를 해결하려면 메뉴 상태를 로컬에 저장해야 합니다(새로 고침을 해도 저장 상태가 변경되지 않음). 여기서는 이에 대해 논의하지 않겠지만 DOM은 확실합니다. + 로컬 스토리지 제어 메뉴 강조 표시 프로젝트가 커짐에 따라 솔루션을 유지 관리하기가 어려워집니다.

이제 vuex가 나타날 차례입니다.

메뉴 관리를 위해 vuex 사용

메뉴 관리를 위해 vuex를 사용하려면 在开发前就规划好菜单的层级 ，以便在 vuex 分配 state 和 mutations 이 필요합니다.

기획 레벨

프로젝트에서 어느 것이 1단계 메뉴인지, 어느 것이 2단계 메뉴인지 판단하는 등... 여기서 주의할 점은 조작을 단순화하기 위해 같은 레벨의 메뉴에는 이름을 붙인다는 점입니다. 이름이 다르기 때문에 vuex에서는 메뉴가 어느 페이지에 속해 있는지 신경 쓸 필요가 없고 상태만 주의하면 됩니다. 메뉴 레벨은 일반적으로 다음과 같습니다:

|-root
| |
| |-first-menu1
| |   |- second-menu1
| |   |- second-menu2
| |   |- second-menu3
| |
| |-first-menu2
|    |- second-menu3
|    |- second-menu4
|    |- second-menu5

vuex에서 `state` 및 `mutations` 할당

다른 레벨의 메뉴는 각각 하나의 `state`를 차지합니다. 이 예에서는 해당 `state' 하나를 차지합니다. `를 `mutations`라고 적는데, 실제 작업에서 코드 재사용을 줄이기 위해 메뉴 상태 관리를 위해 `mutations`를 하나만 작성할 수 있으며, 매개변수를 전달하여 어떤 레벨과 해당 메뉴를 변경할지 결정합니다.

페이지를 새로 고친 후 vuex 상태가 다시 초기화된다는 점에 유의해야 합니다. 이는 메뉴 관리에 필요한 기능과 명백히 일치하지 않습니다(활성 트리거 제외, 다른 작업은 메뉴에 영향을 줄 수 없음). vuex의 기본 수명 주기는 vuex-persistedstate를 통해 변경할 수 있습니다. 다음 예제 코드는 vuex 상태를 쿠키에 저장합니다. vuex의 상태:

const store = new Vuex.Store({
 state: {
  // 初始化
  activeFirstMenu: 'firstMenu1',
  activeSecondMenu : 'secondMenu1',
 },
 mutations: {
  // 更改一级菜单
  changeFirstActiveMenu (state, menu) {
   state.activeFirstMenu = menu;
  },
  // 更改二级二级菜单
  changeSecondActiveMenu (state, menu) {
   state.activeSecondMenu = menu;
  }
 },
});

js를 작성할 때 요령이 있습니다. 경로 경로와 해당 강조 표시된 메뉴 이름은 동일한 것이 가장 좋습니다. 경로 점프가 강조 표시된 메뉴와 직접 관련되어 있기 때문에 매개변수 하나를 줄일 수 있습니다.

<p class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu1 }" @click="menuClicked(&#39;secondMenu1&#39;)">secondMenu1</span>
</p>
<p class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu2 }" @click="menuClicked(&#39;secondMenu2&#39;)">secondMenu2</span>
</p>
<p class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu3 }" @click="menuClicked(&#39;secondMenu3&#39;)">secondMenu3</span>
</p>

Others

Vuex 최적화를 위해

위에서 언급했듯이 실제 작업에서 더 큰 코드 재사용을 달성하기 위해 특정 상태 관리 범주에 대해 하나의 변형만 작성할 수 있으며 변경 내용은 다음과 같이 결정됩니다. 매개변수 전달(페이로드) 메뉴 관리를 예로 들면 다음과 같은 최적화가 수행될 수 있습니다. vuex는 다음과 같이 최적화됩니다.

data () {
 return {
  // 初始化
  activeMenu: {
   // menu 名称相同，和对应路由的 path 相同
   secondMenu1: '',
   secondMenu2: '',
   secondMenu3: '',
  },
 };
},
computed: {
 activeMenuName () {
  // 检测 vuex 中 activeSecondMenu 的变化
  return this.$store.state.activeSecondMenu;
 }
},
methods: {
 menuClicked(path) {
  // 取消当前 tab 高亮
  this.activeMenu[this.activeMenuName] = false;

  // 更新 vuex 状态及 menu 高亮
  this.$store.commit("changeSecondActiveMenu", path);
  this.activeMenu[this.activeMenuName] = true;

  // 路由跳转 path 和对应 menu 名称相同 
  this.$router.push(`/somePath/${path}`);
 },
 init () {
  // 刷新页面重置正确高亮菜单tab
  this.activeMenu[this.activeMenuName] = true;
 },
},
mounted: {
 this.init();
},

컴포넌트 js 부분은 다음과 같이 최적화됩니다.

const store = new Vuex.Store({
 // 其他代码略

 mutations: {
  // 优化后代码，合并 changeFirstActiveMenu 和 changeSecondActiveMenu
  changeActiveMenu (state, menuInfo) {
   state[menuInfo.menuHierarchy] = menuInfo.name;
  }
 }
});

위 내용은 제가 모두를 위해 편집한 내용입니다. 앞으로는 모두에게 도움이 되세요.

관련 기사:

React를 사용하여 반복 렌더링을 방지하는 방법

vue를 사용하여 그리드 레이아웃 기능을 구현하는 방법

Bootstrap에서 Modal에 드래그 앤 드롭 기능 추가 소개

방법 JS에서 미리보기 효과를 얻으려면

3.js를 사용하여 프로젝트 만들기

위 내용은 vuex를 사용하여 메뉴 관리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!