vuex : 用vuex控制侧栏点亮状态

上代码。

 

xxx.vue

<template>
    <div id="xxx">
        <div class="layout">
            <Layout>
                <Sider breakpoint="md" collapsible :collapsed-width="78" :width="106">
                    <Menu :active-name="getActiceName" theme="dark" width="auto" :style="{padding:'10px 0 0'}">
                        <MenuItem name="1-1" @click.native="jump(1)">                            
                            <span>来源字典</span>
                        </MenuItem>
                        <MenuItem name="1-2" @click.native="jump(2)">                            
                            <span>权限字典</span>
                        </MenuItem>
                    </Menu>
                    <div slot="trigger"></div>
                </Sider>
                <Layout>
                    <Content :style="{margin: '0', background: '#212121', minHeight: content_height}">
                        <router-view></router-view>
                    </Content>
                </Layout>
            </Layout>
        </div>
    </div>
</template>

<script>
export default {
    name: "xxx",
    data() {
        return {
            // activeNameString:'1-1',
            routerIndex:1,
            header_height:70,
            content_height:220 + 'px'
        }
    },
    methods:{
        jump(index){
            if (index === 1) {
                this.$router.push('/backHome/dictionary/source')
            } else if (index === 2) {
                this.$router.push('/backHome/dictionary/authority')
            } else if (index === 3) {
                this.$router.push('/backHome/dictionary/account')
            }
        }
    },
    computed:{
        getActiceName(){            
            return this.$store.state.activeNameString
        }
    },
    components: {
        
    },
    created() {
        console.log(this.$store.state.activeNameString)
    },
    mounted(){
        this.content_height = window.innerHeight - this.header_height + 'px'
    }
};
</script>

store.js

export const store = {
  state:{
    test:"hello",
    activeNameString:"1-1"
  },
  getters:{
  },
  mutations:{
    changeActiveNameFunc(state, obj){
      state.activeNameString = obj.activeNameString
    }
  },
  actions:{
    changeActiveNameFunc(context, obj){
      context.commit('changeActiveNameFunc', obj)
    }
  }
}

main.js

...
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
// iview
import iView from 'iview';
Vue.use(iView);
// vuex
Vue.use(Vuex)
import {router} from './router.js'
import {store} from './store.js'

const s = new Vuex.Store(store)
...
const v = new Vue({
  el: '#app',
  router,
  store:s,
  components: { App },
  template: '<App/>'
})

以上。