Vuex的基本用法、使用场景以及缺点和解决方案

最新推荐文章于 2024-07-24 23:00:08 发布

前端uio

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.5k

点赞数 32

分类专栏： web开发文章标签：前端 vue.js elementui javascript css

本文链接：https://blog.csdn.net/weixin_52231116/article/details/139266441

版权

web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

大家好~ 我是前端uio，本文主要介绍Vuex的基本用法、使用场景以及缺点和解决方案，最后在Vue3中与Pinia进行比较。有什么疑问都欢迎私聊或者在评论区留言。如果需要开发web网页或者微信小程序都可以找我私聊，我会尽可能回答我了解的内容。

一、基本介绍

1.可参考官方文档进行学习( Vuex的使用 )

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

2.作用

i）集中管理状态：Vuex 允许开发者将应用的状态集中存储在一个地方，便于管理和维护。
ii）使状态响应式：Vuex 的状态是响应式的，当状态发生变化时，依赖这些状态的组件会自动更新。
ii）强制使用单一数据源：Vuex 要求开发者通过 mutations 来改变状态，这样可以避免直接修改状态，从而保证状态的一致性。
iv）便于调试：Vuex 的状态变化可以被追踪，这有助于开发者更好地理解应用的工作原理，并进行调试。

3.使用场景

i）单页应用

在单页应用中，组件之间的状态共享、音乐播放控制、登录状态管理、购物车管理等都可以通过 Vuex 来实现

ii）复杂的组件通信

Vuex 可以解决多层级组件嵌套时的状态传递问题，使得组件之间的通信更为清晰和易于管理。

iii）数据中心化

Vuex 作为数据中心，可以集中管理应用的状态，避免数据在不同组件之间的重复存储和不一致性。

二、基本用法

1.创建 Vuex Store

在Vue 项目中创建一个 store 文件夹，并在该文件夹内创建 index.js 文件作为 Vuex 的入口文件。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    message: '胡桃!'
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  },
  actions: {
    changeMessage({ commit }, newMessage) {
      setTimeout(() => {
        commit('updateMessage', newMessage);
      }, 1000); // 模拟异步操作
    }
  }
});

export default store;

2.在组件中使用Vuex

i）使用 mapState、mapMutations 和 mapActions 辅助函数来简化代码。这些辅助函数允许我们将 Vuex 的状态、mutations 和 actions 映射到 Vue 组件的计算属性和方法中

// App.vue
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage']),
    ...mapActions(['changeMessage'])
  }
};
</script>

ii）如果你需要从 Vuex Store 中获取经过计算的状态，可以使用 getters。

① 使用 mapGetters 辅助函数来将 Vuex 的 getter 映射到 Vue 组件的计算属性中。

// store/index.js
getters: {
  reversedMessage(state) {
    return state.message.split('').reverse().join('');
  }
}

// App.vue
<template>
  <div>
    <h1>{{ reversedMessage }}</h1>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['message']),
    ...mapGetters(['reversedMessage'])
  }
};
</script>

② 直接访问 $store.state

<template>
  <!-- 模板中的内容 -->
</template>

<script>
export default {
  methods: {
    incrementCount() {
      this.$store.state.count++; // 直接访问 Vuex store 中的 count 状态并增加它的值
    }
  }
};
</script>