【VUEX】最好用的传参方式--Vuex的详解

1.定义

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它可以帮助我们统一管理应用程序中的状态，并提供一种可预测的方式修改和获取状态。Vuex将所有组件的状态集中存储在一个单一的全局状态树中，并通过 mutation（变更）来修改状态。它还提供了一种方便的方式来监听状态的变化，并能够处理异步操作。通过使用Vuex，我们可以更有效地管理大型复杂的Vue.js应用程序的状态

2.Vuex中的各个js文件的用途

1. `state.js`: 这个文件用来定义应用程序的状态，也就是存储数据的地方。你可以在这里初始化应用程序的状态，并定义它们的默认值。【单一状态树】
2. `mutations.js`: 这个文件包含了一系列的mutations（变更），用来修改应用程序的状态。每个mutation都是一个函数，接受两个参数：当前的状态和载荷（payload），通过修改状态来实现对应的功能。【触发同步事件】
3. `actions.js`: 这个文件包含了一系列的actions（动作），用来触发mutations。每个action都是一个函数，可以进行一些异步操作，然后再调用对应的mutation来修改状态。【可以包含异步操作】
4. `getters.js`: 这个文件包含了一系列的getters（获取器），用来从应用程序的状态中获取派生出来的一些计算属性。你可以在这里定义一些逻辑操作，方便获取数据。【状态获取】

除了这些文件之外，你还需要创建一个`store.js`文件/文件夹，用来将上述文件组合起来并创建Vuex的store实例。在`store.js`文件中，你可以导入上述的state、mutations、actions和getters，并通过`new Vuex.Store()`创建一个全局的Vuex实例。这样，你就可以在整个Vue.js应用程序中使用这个store实例来访问和修改状态了。

二.为什么要使用Vuex

🔺如果我们按照之前的传参方式--父子通信&总线的方法来传递，则会出现很多繁琐的问题，父子通信的方式在这里就不过多赘述了，我们可以来看看总线的方法，我们在前面讲过，当我们许多组件时层层嵌套的时候，那我们传参的时候也需要经过重重关卡，这样非常的繁琐，所以我们选择使用总线来解决，所有的组件都只需要与总线打交道就好了。但使用总线也会出现一些问题--因为在总线模式下，状态分散在各个组件之间，很难清楚地了解和追踪状态的变化，因此它不便于我们后期的维护，我们修改功能时候，常常需要找寻很久才能够找到我们想要修改的那个功能，所以我们才使用vuex

🔺上面我们也介绍了vuex，它的优势就是能够统一管理应用程序中的状态，为了更加清楚的了解到vuex的妙处，我罗列了以下的几点

集中管理状态：在大型的Vue.js应用程序中，组件之间的状态管理可能会变得复杂混乱。Vuex提供了一个中央化的状态管理模式，将所有组件的状态集中存储在一个单一的全局状态树中。这样，你可以清楚地知道状态在整个应用程序中的流动。

状态共享：在多个组件之间共享状态可能会导致难以维护的问题。通过Vuex，你可以将状态存储在一个单独的地方，并在需要的组件中轻松地获取和修改该状态。这样可以避免冗余的代码，并且可以确保状态的一致性。

可预测的状态变更： Vuex引入了mutation的概念，强制遵循一种规范的方式来修改状态。只有通过mutation才能改变状态，这样可以减少对状态的直接修改，从而更好地追踪状态变更的历史和调试应用程序。

方便的异步操作：在处理异步操作时，Vuex提供了actions来与mutations结合使用。你可以在actions中进行异步操作（如发起API请求），然后再通过调用mutations来修改状态。这种分离的方式可以更好地管理异步流程，并且可以简化对异步操作的处理

三.Vuex的怎么使用【使用Vuex获取、修改值案例】

1.安装 Vuex

▲node.js版本10

npm install vuex --save

▲node.js版本18

  npm i -S vuex@3.6.2

2.创建一个 store文件夹

命名是看个人习惯，当然也可以不建文件夹，直接新建个js文件也是可以的

以下的代码都是基于使用Vuex获取、修改值案例所写，所以我们还要预先创建两个vue文件，以及配置好路由等等

还需要使用模拟数据，以直观的感受到vuex的魅力


 
    <el-submenu key="key_2004" index="index_2004">
      <template slot="title">
        <span slot="title">Vuexspan>
      template>
      <el-menu-item key="key_0220" index="/vuex/V1">
        <span>Onespan>
      el-menu-item>
      <el-menu-item key="key_0416" index="/vuex/V2">
        <span>Twospan>
      el-menu-item>
    el-submenu>

①src>store>index.js

新建vuex的store实例，并注册上面引入的各大模块


import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })
 
 export default store

②src>store>state.js

定义应用程序的状态


export default {
  Name: '是辉辉啦'
}

③src>store>mutations.js

修改应用程序的状态


export default {
  setName: (state, payload) => {
    // 1.state指state.js文件导入的对象
    // 2.payload指vue文件传递过来的界面
    state.Name = payload.Name
  }
}

④src>store>getters.js

从应用程序的状态中获取派生出来的一些计算属性


export default {
  getName: (state) => {
    return state.Name;
  }
}