refactor: 重构vuex

This commit is contained in:
chenjianxing 2021-03-23 15:49:24 +08:00
parent f1bcddd0ce
commit 4b7933a85d
12 changed files with 90 additions and 95 deletions

View File

@ -5,26 +5,26 @@
<el-col :span="14">
<el-menu class="header-menu" :unique-opened="true" mode="horizontal" router :default-active='$route.path'>
<el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/home'">
<el-menu-item v-show="isNewVersion" :index="'/api/home'">
{{ $t("i18n.home") }}
</el-menu-item>
<el-menu-item v-show="$store.state.switch.value=='old'" :index="'/api/home_obsolete'">
<el-menu-item v-show="isOldVersion" :index="'/api/home_obsolete'">
{{ $t("i18n.home") }}
</el-menu-item>
<el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/definition'">
<el-menu-item v-show="isNewVersion" :index="'/api/definition'">
{{ $t("i18n.definition") }}
</el-menu-item>
<el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/automation'">
<el-menu-item v-show="isNewVersion" :index="'/api/automation'">
{{ $t("i18n.automation") }}
</el-menu-item>
<el-menu-item v-show="$store.state.switch.value=='new'" :index="'/api/automation/report'">
<el-menu-item v-show="isNewVersion" :index="'/api/automation/report'">
{{ $t("i18n.report") }}
</el-menu-item>
<el-submenu v-show="$store.state.switch.value=='old'"
<el-submenu v-show="isOldVersion"
v-permission="['test_manager','test_user','test_viewer']" index="4">
<template v-slot:title>{{ $t('commons.test') }}</template>
<ms-recent-list ref="testRecent" :options="testRecent"/>
@ -35,7 +35,7 @@
:title="$t('load_test.create')"/>
</el-submenu>
<el-submenu v-show="$store.state.switch.value=='old'"
<el-submenu v-show="isOldVersion"
v-permission="['test_manager','test_user','test_viewer']" index="5">
<template v-slot:title>{{ $t('commons.report') }}</template>
<ms-recent-list ref="reportRecent" :options="reportRecent"/>
@ -44,7 +44,7 @@
</el-submenu>
<el-menu-item v-show="$store.state.switch.value=='old'"
<el-menu-item v-show="isOldVersion"
v-permission="['test_manager','test_user','test_viewer']" :index="'/api/monitor/view'">
{{ $t('commons.monitor') }}
</el-menu-item>
@ -64,6 +64,7 @@ import MsCreateTest from "../../common/head/CreateTest";
import {ApiEvent, LIST_CHANGE} from "@/business/components/common/head/ListEvent";
import SearchList from "@/business/components/common/head/SearchList";
import ProjectChange from "@/business/components/common/head/ProjectSwitch";
import {mapGetters} from "vuex";
export default {
name: "MsApiHeaderMenus",
@ -94,6 +95,12 @@ export default {
currentProject: ''
}
},
computed: {
...mapGetters([
'isNewVersion',
'isOldVersion',
])
},
methods: {
registerEvents() {
ApiEvent.$on(LIST_CHANGE, () => {

View File

@ -30,6 +30,7 @@
<script>
import {LicenseKey} from '@/common/js/constants';
import {mapGetters} from "vuex";
const requireContext = require.context('@/business/components/xpack/', true, /router\.js$/)
const report = requireContext.keys().map(key => requireContext(key).report);
@ -62,15 +63,21 @@
this.isReport = false;
}
},
computed: {
...mapGetters([
'isNewVersion',
'isOldVersion',
])
},
methods: {
handleSelect(index) {
this.activeIndex = index
},
active() {
if (this.activeIndex === '/api') {
if (this.$store.state.switch.value == 'new') {
if (this.isNewVersion) {
window.location.href = "/#/api/home";
} else if (this.$store.state.switch.value == 'old') {
} else if (this.isOldVersion) {
window.location.href = "/#/api/home_obsolete";
}
}

View File

@ -9,10 +9,10 @@
<el-dropdown-item command="about">{{ $t('commons.about_us') }} <i class="el-icon-info"/></el-dropdown-item>
<el-dropdown-item command="help">{{ $t('commons.help_documentation') }}</el-dropdown-item>
<el-dropdown-item command="ApiHelp">{{ $t('commons.api_help_documentation') }}</el-dropdown-item>
<el-dropdown-item command="old" v-show=isReadOnly @click.native="changeBar('old')">
<el-dropdown-item command="old" v-show=isNewVersion @click.native="changeBar('old')">
{{ $t('commons.cut_back_old_version') }}
</el-dropdown-item>
<el-dropdown-item command="new" v-show=!isReadOnly @click.native="changeBar('new')">
<el-dropdown-item command="new" v-show=isOldVersion @click.native="changeBar('new')">
{{ $t('commons.cut_back_new_version') }}
</el-dropdown-item>
<el-dropdown-item command="logout">{{ $t('commons.exit_system') }}</el-dropdown-item>
@ -27,6 +27,7 @@
import {getCurrentUser} from "@/common/js/utils";
import AboutUs from "./AboutUs";
import axios from "axios";
import {mapGetters} from "vuex";
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
const auth = requireComponent.keys().length > 0 ? requireComponent("./auth/Auth.vue") : {};
@ -36,13 +37,16 @@ export default {
components: {AboutUs},
data() {
return {
isReadOnly: this.$store.state.isReadOnly.flag
}
},
computed: {
currentUser: () => {
return getCurrentUser();
}
},
...mapGetters([
'isNewVersion',
'isOldVersion',
])
},
methods: {
logout: function () {
@ -79,9 +83,7 @@ export default {
}
},
changeBar(item) {
this.isReadOnly = !this.isReadOnly
this.$store.commit('setFlag', this.isReadOnly);
this.$store.commit('setValue', item);
this.$store.commit('setVersionSwitch', item);
if (item == "old") {
window.location.href = "/#/api/home_obsolete";
} else {

View File

@ -28,6 +28,7 @@
<script>
import {getCurrentProjectID, getCurrentUser, hasRoles} from "@/common/js/utils";
import {PROJECT_ID, ROLE_TEST_MANAGER, ROLE_TEST_USER, ROLE_TEST_VIEWER} from "@/common/js/constants";
import {mapGetters} from "vuex";
export default {
name: "SearchList",
@ -39,6 +40,10 @@ export default {
this.init();
},
computed: {
...mapGetters([
'isNewVersion',
'isOldVersion',
]),
currentProjectId() {
return localStorage.getItem(PROJECT_ID)
}
@ -106,9 +111,9 @@ export default {
localStorage.setItem(PROJECT_ID, projectId);
let path = this.$route.matched[0].path ? this.$route.matched[0].path : '/';
if (path === '/api') {
if (this.$store.state.switch.value === 'new') {
if (this.isNewVersion) {
path = "/api/home";
} else if (this.$store.state.switch.value === 'old') {
} else if (this.isOldVersion) {
path = "/api/home_obsolete";
} else {
path = '/';

View File

@ -123,7 +123,7 @@ export default {
},
methods: {
importAPITest() {
let apiTest = this.$store.state.api.test;
let apiTest = this.$store.state.test;
if (apiTest && apiTest.name) {
this.$set(this.test, "name", apiTest.name);
let blob = new Blob([apiTest.jmx.xml], {type: "application/octet-stream"});

View File

@ -169,7 +169,7 @@ export default {
type: 'bar',
itemStyle: {
normal: {
color: this.$store.state.theme.theme ? this.$store.state.theme.theme : COUNT_NUMBER
color: this.$store.state.theme ? this.$store.state.theme : COUNT_NUMBER
}
}
},
@ -179,7 +179,7 @@ export default {
type: 'bar',
itemStyle: {
normal: {
color: this.$store.state.theme.theme ? this.$store.state.theme.theme : COUNT_NUMBER_SHALLOW
color: this.$store.state.theme ? this.$store.state.theme : COUNT_NUMBER_SHALLOW
}
}
}]

View File

@ -10,7 +10,7 @@ import router from "./components/common/router/router";
import YanProgress from 'yan-progress';
import './permission' // permission control
import i18n from "../i18n/i18n";
import store from "./store";
import store from "../store";
import {permission, roles, tester, xpack} from './permission'
import chart from "../common/js/chart";
import CalendarHeatmap from "../common/js/calendar-heatmap";

View File

@ -1,72 +0,0 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const Common = {
state: {
projectId: ""
},
mutations: {
setProjectId(state, projectId) {
state.projectId = projectId;
}
}
}
const API = {
state: {
test: {}
},
mutations: {
setTest(state, test) {
state.test = test;
},
clearTest(state) {
state.test = {};
}
}
}
const Switch = {
state: {
value: "new"
},
mutations: {
setValue(state, value) {
state.value = value;
}
}
}
const IsReadOnly = {
state: {
flag: true
},
mutations: {
setFlag(state, value) {
state.flag = value;
}
}
}
const Theme = {
state: {
theme: undefined
},
mutations: {
setTheme(state, value) {
state.theme = value;
}
}
}
export default new Vuex.Store({
modules: {
api: API,
common: Common,
switch: Switch,
isReadOnly: IsReadOnly,
theme: Theme
}
})

View File

@ -0,0 +1,6 @@
const actions = {
// changeCount: ({
// commit
// }) => commit('changeCount'),
}
export default actions;

View File

@ -0,0 +1,6 @@
const getters = {
isNewVersion: state => state.versionSwitch === 'new',
isOldVersion: state => state.versionSwitch === 'old'
}
export default getters

View File

@ -0,0 +1,25 @@
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
projectId: "",
test: {},
versionSwitch: "new",
isReadOnly: true,
theme: undefined
}
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
export default store

View File

@ -0,0 +1,9 @@
const mutations = {
setProjectId: (state, projectId) => state.projectId = projectId,
setTest: (state, test) => state.test = test,
clearTest: state => state.test = {},
setVersionSwitch: (state, value) => state.versionSwitch = value,
setTheme: (state, value) => state.theme = value
}
export default mutations;