diff --git a/frontend/src/business/components/api/head/ApiHeaderMenus.vue b/frontend/src/business/components/api/head/ApiHeaderMenus.vue
index 982ecc1960..68275d6e10 100644
--- a/frontend/src/business/components/api/head/ApiHeaderMenus.vue
+++ b/frontend/src/business/components/api/head/ApiHeaderMenus.vue
@@ -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, () => {
diff --git a/frontend/src/business/components/common/head/HeaderTopMenus.vue b/frontend/src/business/components/common/head/HeaderTopMenus.vue
index 7f2cc6056c..8d559d0e94 100644
--- a/frontend/src/business/components/common/head/HeaderTopMenus.vue
+++ b/frontend/src/business/components/common/head/HeaderTopMenus.vue
@@ -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";
           }
         }
diff --git a/frontend/src/business/components/common/head/HeaderUser.vue b/frontend/src/business/components/common/head/HeaderUser.vue
index bd17eb32a4..59fb5744f8 100644
--- a/frontend/src/business/components/common/head/HeaderUser.vue
+++ b/frontend/src/business/components/common/head/HeaderUser.vue
@@ -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 {
diff --git a/frontend/src/business/components/common/head/SearchList.vue b/frontend/src/business/components/common/head/SearchList.vue
index ec087a2819..d15819eb9a 100644
--- a/frontend/src/business/components/common/head/SearchList.vue
+++ b/frontend/src/business/components/common/head/SearchList.vue
@@ -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 = '/';
diff --git a/frontend/src/business/components/performance/test/EditPerformanceTest.vue b/frontend/src/business/components/performance/test/EditPerformanceTest.vue
index 97596ac98e..c4fe35f1dc 100644
--- a/frontend/src/business/components/performance/test/EditPerformanceTest.vue
+++ b/frontend/src/business/components/performance/test/EditPerformanceTest.vue
@@ -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"});
diff --git a/frontend/src/business/components/track/home/TrackHome.vue b/frontend/src/business/components/track/home/TrackHome.vue
index a978df9cea..206a2af82e 100644
--- a/frontend/src/business/components/track/home/TrackHome.vue
+++ b/frontend/src/business/components/track/home/TrackHome.vue
@@ -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
               }
             }
           }]
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index 4d98b7cd4e..4fe1c4f6c3 100644
--- a/frontend/src/business/main.js
+++ b/frontend/src/business/main.js
@@ -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";
diff --git a/frontend/src/business/store.js b/frontend/src/business/store.js
deleted file mode 100644
index 4fbb5d7f17..0000000000
--- a/frontend/src/business/store.js
+++ /dev/null
@@ -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
-  }
-})
diff --git a/frontend/src/store/actions.js b/frontend/src/store/actions.js
new file mode 100644
index 0000000000..97014f3a52
--- /dev/null
+++ b/frontend/src/store/actions.js
@@ -0,0 +1,6 @@
+const actions = {
+  // changeCount: ({
+  //   commit
+  // }) => commit('changeCount'),
+}
+export default actions;
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
new file mode 100644
index 0000000000..f0d2e0baab
--- /dev/null
+++ b/frontend/src/store/getters.js
@@ -0,0 +1,6 @@
+const getters = {
+  isNewVersion: state => state.versionSwitch === 'new',
+  isOldVersion: state => state.versionSwitch === 'old'
+}
+
+export default getters
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
new file mode 100644
index 0000000000..b3700caada
--- /dev/null
+++ b/frontend/src/store/index.js
@@ -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
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
new file mode 100644
index 0000000000..a6f0a4a820
--- /dev/null
+++ b/frontend/src/store/mutations.js
@@ -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;