vuex应用

vuex 状态管理

功能需求

页面切换保留上一个页面 Tabs 标签页选项

vuex 应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <el-tabs
    type="border-card"
    style="margin: 0 20px; height: 93vh"
    @tab-click="tabChange"
    v-model="$store.state.activeName"
  >
    <el-tab-pane label="选项1" name="选项1"></el-tab-pane>
    <el-tab-pane label="选项2" name="选项2"></el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  methods: {
    tabChange(tab) {
      this.$store.commit("setTabName", tab.paneName);
      // this.$store.dispatch('getTabName', tab.paneName)
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    activeName: "选项1",
  },
  mutations: {
    setTabName(state, name) {
      state.activeName = name;
    },
  },
  actions: {
    getTabName({ commit }, name) {
      commit("setTabName", name);
    },
  },
});