• Vuex获取、修改参数值及异步数据处理

    一、Vuex简介

    1.1 vuex介绍

     Vuex是专门为vue应用程序开发的状态管理模式，将组件的共享状态抽取出来，以一个全局单例模式进行管理，组件树构成一个巨大的视图，不管组件在树的何种位置，任何组件都能获取到状态和触发行为。可以将其想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作。（核心就是 解决组件间的通讯问题）
     

    1.2 vuex核心

    • State（单一状态树）：存储应用程序的状态数据，类似于组件中的data属性。但与组件的data不同，Vuex的状态是响应式的，当状态发生变化时，所有依赖该状态的组件都会自动更新。
    • Getters（状态获取）：用于从状态中派生出新的数据，类似于Vue组件中的计算属性。Getters可以对状态进行一些计算或过滤，并将结果暴露给组件使用。
    • Mutations（变更）：用于修改状态的唯一途径。Mutations是同步的操作，用于处理同步的状态变更。每个Mutation都有一个字符串类型的事件名称和一个回调函数，通过提交（commit）Mutation来触发状态的变更。
    • Actions（动作：提交mutation，可以包含异步操作）：用于处理异步操作和复杂的业务逻辑。Actions可以包含任意异步操作，例如发送网络请求或执行定时任务，并通过提交Mutations来修改状态。Actions可以通过分发（dispatch）来触发。
    • Modules（模块）：用于将大型的Vuex应用程序拆分为更小的模块，每个模块都有自己的状态、获取器、变更和动作。这样可以更好地组织代码，提高代码的可维护性和可扩展性。

    使用Vuex可以带来以下好处：

    • 集中式的状态管理：将应用程序的状态集中管理，使得状态的变更更加可追踪和可维护。
    • 组件之间的数据共享：不同组件之间可以轻松地共享状态，避免了通过props和事件传递数据的繁琐过程。
    • 状态的可预测性：通过明确的状态变更方式（Mutations和Actions），可以更好地追踪状态的变化，提高代码的可读性和可维护性。
    • 插件扩展：Vuex提供了丰富的插件机制，可以方便地扩展Vuex的功能，例如添加日志记录、持久化存储等。

    二、Vuex使用

    2.1 Vuex安装

    注意： 运行环境

    1、node.js版本10输入下指令进行安装

    npm install vuex -S

    2、node.js版本18请执行下指令 

    npm i -S vuex@3.6.2 

    2.2 创建store模块

    创建store目录及需要的文件：

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

    1、src/store/index.js

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    3. import state from './state'
    4. import getters from './getters'
    5. import actions from './actions'
    6. import mutations from './mutations'
    7. Vue.use(Vuex)
    8. const store = new Vuex.Store({
    9.   state,
    10.   getters,
    11.   actions,
    12.   mutations
    13. })
    14.  
    15. export default store

      2、src/main.js

     通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件可以通过this.$store访问到。

    三、使用Vuex获取、修改值案例

    3.1 创建两个菜单组件

    src/views/vuex

    3.2 配置路由

    src/router/index.js

    3.3 模拟菜单数据

    1.  
    2. <el-submenu key="key_999" index="index_999">
    3.       <template slot="title">
    4.         <span slot="title">Vuex管理span>
    5.       template>
    6.       <el-menu-item key="key_99901" index="/vuex/page1">
    7.         <span>page1span>
    8.       el-menu-item>
    9.       <el-menu-item key="key_99902" index="/vuex/page2">
    10.         <span>page2span>
    11.       el-menu-item>
    12.     el-submenu>
    13.   el-menu>

    3.4 vuex核心操作

    1、在state.js中定义全局参数

    1. export default {
    2.   Name: '文昊'
    3. }

    2、在mutations.js中改变值

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

     3、在getters.js中获取参数值

    1. export default {
    2.   getName: (state) => {
    3.     return state.Name;
    4.   }
    5. }

      这一些列操作相当于java分装实体类，把它一一才拆分，这样可以更好地组织代码，提高代码的可维护性和可扩展性。

    3.5 界面获取、修改值实现

    1、page1.vue组件编写：