vue3-vuex自定义导航状态加classs=on

曹え 5811 发布于:2022-02-09 03:04:01


配置vuex


image.png

import { createStore } from 'vuex'

// Create a new store instance.
export default createStore({
  state : {
      nav: 0,
      count: 0,
      name:'哈哈',
      token:''
  },
  mutations: {
	  nav(state,n){
		  state.nav = n;
	  },
    increment (state) {
      state.count++
    },
	setName(state, payload) { 
		state.name = payload.name;
	},
  },
    actions: {},
    modules: {}
})


使用方法


		<ul>
		<li v-bind:class="{ on: store.state.nav==0 }">首页</li>
		<li v-bind:class="{ on: store.state.nav==1 }">关于</li>
		<li v-bind:class="{ on: store.state.nav==2 }">产品</li>
		</ul>
<script setup>
import { reactive,ref } from 'vue'
import { useStore } from 'vuex';
 const store = useStore();
 
 // 在关于我们页面时候执行下面代码
 store.commit('nav', 1)
 
  // 在产品页面时候执行下面代码
 store.commit('nav', 2)
 
</script>


觉得有用请点个赞吧!
1 481