vue完整项目源码_Vue、Spring Boot开发小而完整的Web前后端分离项目实战13

第13讲 使用vuex管理tabs数据

tabs数据从vuex中读取，方便管理

1.1、在store中新建MenuStore.js,用于管理tabs和菜单数据

import Vue from 'vue'import Vuex from 'vuex'​Vue.use(Vuex)​export default {    //state相当于一个全局的共享内存，在该应用的其他地方可以访问，访问必须通过mutations才能访问    state: {        //当前激活的选项卡name值        editableTabsValue: 'desktop',        //tabs数据        tabs: [            {                title: "首页",                name: "desktop"            },            {                title: "用户管理",                name: "userList"            },            {                title: "角色管理",                name: "roleList"            },            {                title: "权限管理",                name: "menuList"            }        ]    },    mutations: {    },    actions: {    }}​

1.2、修改store目录下的index.js为如下所示代码

import Vue from 'vue'import Vuex from 'vuex'//分模块管理store,在总模块引入其他的分模块就可以Vue.use(Vuex)//引入MenuStoreimport MenuStore from '@/store/MenuStore'export default new Vuex.Store({  modules: {    MenuStore  }})​

1.3、修改components目录下的tabs.vue如下

    {{item.content}}​​

1.4、点击tabs选项卡时报错 Computed property "editableTabsValue" was assigned to but it has no setter解决方式

修改后tabs.vue代码如下

    {{item.content}}​​