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

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/page1">
        <span>page1</span>
      </el-menu-item>
      <el-menu-item key="key_99902" index="/vuex/page2">
        <span>page2</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>

3.4 vuex核心操作

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

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

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、page1.vue组件编写：

<template>
    <div>
        <h1>page1</h1>
        <p>请输入您要修改的值</p>
    <input type="text" v-model="msg">
    <button @click="changed">修改参数值</button>
    <button @click="getData">获取参数值</button>
    </div>
  </template>
  <script>
  export default {
    data () {
      return {
        msg: 'page1'
      }
    },
    methods:{
      changed(){
        this.$store.commit('setName',{Name:this.msg})
      },
      getData(){
        let name = this.$store.getters.getName;
        alert(name);
      }
}
  }
  </script>
  <style>
  </style>

注意：

setName是mutations.js导出的属性名

getName是getters.js导出的属性名

2、page2.vue组件编写：

<template>
    <div>
        <h1>page2</h1>
        {{change}}
    </div>
  </template>
  <script>
  export default {
    data () {
      return {
        msg: 'page2'
      }
    },
    computed:{
      change(){
        return this.$store.getters.getName;
      }
    }
  }
  </script>
  <style>
  </style>

效果展示

四、异步处理

4.1 异步改变值

1、src/store/actions.js

export default {
  setNameSync: (context, payload) => {
    //context指的是vuex的上下文
    setTimeout(function() {
      context.commit('setName', payload)
    }, 3500)
  }
};

2、在page1.vue组件添加异步事件

<button @click="Asynchronization">异步改变参数值</button>
    Asynchronization() {
        this.$store.dispatch('setNameSync', {
          name: this.msg
        })
      }

4.2 异步发送Ajax到后端

1、后端请求代码编写：

package com.zking.ssm.controller;
import com.zking.ssm.util.JsonResponseBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;
@RestController
@RequestMapping("/vuex")
public class VuexController {
    @RequestMapping("/queryVuex")
    public JsonResponseBody<?> queryVuex(HttpServletRequest request) {
        String resturantName = request.getParameter("resturantName");
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String date = sdf.format(new Date());
        try {
            System.out.println("模拟异步情况，睡眠6秒，不能超过10秒，axios超时时间设置的是10秒！");
            Thread.sleep(6000);
            System.out.println("睡醒了，继续...");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return new JsonResponseBody<>(resturantName + "-" + date,true,0,null);
    }
}

2、src/api/action.js 封装请求的地址

'VUEX': '/vuex/queryVuex'

3、src/store/actions.js 异步发送ajax到后端

  setNameAjax: (context, payload) => {
    let _this = payload._this;
    let url = _this.axios.urls.VUEX;
    let params = {
      resturantName: payload.Name
    };
    _this.axios.post(url, params).then(r => {
      console.log(r)
    }).catch(r => {
      //异常代码
      console.log(r);
    });
  }

4、在paget1.vue组件添加Ajax异步事件

<button @click="Ajax">异步Ajax改变参数值</button>
      Ajax() {
        this.$store.dispatch('setNameAjax', {
          Name: this.msg,
          _this: this
        })
      }

9.5秒异步处理演示：

Tips❕

Action类似于 mutation，不同在于：

1. Action提交的是mutation，而不是直接变更状态

2. Action可以包含任意异步操作

3. Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性

注1： VUEX 的 actions 中无法获取到 this 对象

如果要在actions 或者 mutations 中使用this对象，可以在调用的时候把this对象传过去。

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