大家好~ 我是前端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>

三、缺点以及解决方式

1.缺点：刷新导致状态重置，数据丢失

        当浏览器进行刷新时，Vuex中的状态会重新变为初始状态，这可能导致用户体验上的不便，简单来说，就是数据没有保存在本地，特别是在用户登录或提交订单后跳转到另一个页面，如果此时刷新浏览器，可能会丢失重要的 信息，如token令牌或订单状态。

2.解决方式：使用状态持久化插件

        可以根据缺点产生的原因来进行解决，可以手动进行配置，进行本地化保存，也可以使用如vuex-persistedstate这样的插件来解决刷新浏览器导致状态重置的问题。这些插件可以在页面刷新前将Vuex中的数据保存到浏览器缓存中，页面刷新后，再从缓存中恢复数据，确保状态的持续性。

四、总结与思考

 1.使用Vuex的场景（用户登录状态、购物车管理等）

2.在vue3中，使用pinia进行状态管理，与Vuex有什么不同(弃用mutation，用action处理同步、异步方法，使用pinia-plugin-persistedstate进行状态管理)