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

配置vuex

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>