使用Vuex改造Vue项目的状态管理-CSDN博客

本文通过一个简单的tab切换例子展示了如何利用Vuex进行状态管理。Vuex中的state用于存储全局变量，mutations作为修改state的唯一途径，actions用于处理异步操作。在组件中，使用mapState和mapMutations映射Vuex的状态和方法，实现数据的响应式更新。改造后的代码在App组件中包含Tab和Page组件，Tab组件处理选项卡的切换，Page组件根据当前选中的选项卡显示对应的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1-初看官网图理解：

State:装各种全局变量的容器；

Mutations:装各种全局方法的容器，只有它能改变state的变量；

Actions:异步请求后台数据的全局方法集合

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        curIdx: 0
    },
    mutations: {
        setIdx(state, index) {
            state.curIdx = index;
        }
    },
    actions: {},
    modules: {}
})

组件调用vuex方式：

import {mapState,mapMutations} from 'vuex'



export default{

computed:{

   ...mapState(['state里的变量1','state里的变量2','state里的变量n'])

},

methods:{

   ...mapMutations(['mutations里的方法1','mutations里的方法2','mutations里的方法n'])

}

}

2-利用vuex改造01的tab例子,项目结构如下：

2.1-利用vuex改造tab后的代码入下：

<template>
  <div>
    <a
      href="javascroript:void(0);"
      :class="[{ current: curIdx === 0 }]"
      @click="setIdx(0)"
      >选项1</a
    >
    <a
      href="javascroript:void(0);"
      :class="[{ current: curIdx === 1 }]"
      @click="setIdx(1)"
      >选项2</a
    >
    <a
      href="javascroript:void(0);"
      :class="[{ current: curIdx === 2 }]"
      @click="setIdx(2)"
    >选项3</a
    >
    <a
      href="javascroript:void(0);"
      :class="[{ current: curIdx === 3 }]"
      @click="setIdx(3)"
      >选项4</a
    >
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import {mapState, mapMutations} from 'vuex'
export default {
  name: "Tab",
  
  components: {},
  // 定义属性
  data() {
    return {};
  },
  computed: {
    ...mapState(['curIdx'])
  },
  // 方法集合
  methods: {
      ...mapMutations(['setIdx'])
  },
 
};
</script>

<style  scoped>
a{
    margin-right: 10px;
}
.current{
    text-decoration: none;
    color: #000;
}

</style>

2.2-page组件代码如下：

<template>

  <div>
    {{ content[curIdx] }}
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { mapState } from 'vuex';
export default {
  name: "Page",
  components: {},
  // 定义属性
  data() {
    return {
      content: ["页面1", "页面2", "页面3", "页面4"],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(['curIdx'])
  },

  // 方法集合
  methods: {},
};
</script>

<style lang='stylus' scoped></style>

2.3-App组件代码如下：

<template>
  <div id="app">
    <tab/>
    <page/>
  </div>
</template>
<script>
import Tab from './components/tab/index.vue';
import Page from './components/page/index.vue'
export default {
  name:'App',
  components: {
    Tab,
    Page
  },
  data () {
    return {
     
    }
  },
  methods: {
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

2.4 store代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        curIdx: 0
    },
    mutations: {
        setIdx(state, index) {
            state.curIdx = index;
        }
    },
    actions: {},
    modules: {}
})