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


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

2、src/main.js

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

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

3.1 创建两个菜单组件

src/views/vuex

3.2 配置路由

src/router/index.js

3.3 模拟菜单数据


    
    <el-submenu key="key_999" index="index_999">
      <template slot="title">
        <span slot="title">Vuex管理span>
      template>
      <el-menu-item key="key_99901" index="/vuex/pageOne">
        <span>pageOnespan>
      el-menu-item>
      <el-menu-item key="key_99902" index="/vuex/pageTwo">
        <span>pageTwospan>
      el-menu-item>
    el-submenu>

3.4 vuex核心操作

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


export default {
  Name: '云村小威'
}

2、在mutations.js中改变值


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

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


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

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

3.5 界面获取、修改值实现

1、pageOne.vue组件编写：