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

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于Vuex+ElementUI的相关操作吧

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

一.Vuex是什么

1.定义       

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

二.为什么要使用Vuex

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

1.安装 Vuex

2.创建一个 store文件夹

①src>store>index.js

②src>store>state.js

③src>store>mutations.js

④src>store>getters.js

3.在Vue 文件中引入 store

4.将 store 添加到 Vue 实例中

5.在组件中使用 store

四.Vuex的异步加载问题

1.异步修改值

src>store>actions.js

​2.异步修改值到后端

后端代码

src/api/action.js 

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

​在vue组件添加Ajax异步事件

---

一.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的妙处，我罗列了以下的几点

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

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

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

4. 方便的异步操作： 在处理异步操作时，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">Vuex</span>
      </template>
      <el-menu-item key="key_0220" index="/vuex/V1">
        <span>One</span>
      </el-menu-item>
      <el-menu-item key="key_0416" index="/vuex/V2">
        <span>Two</span>
      </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;
  }
}

3.在Vue 文件中引入 store

4.将 store 添加到 Vue 实例中

5.在组件中使用 store

<template>
  <div>
    <h1>One</h1>
    <p>请输入您要修改的值</p>
    <input type="text" v-model="msg">
    <button @click="chang">修改参数值</button>
    <button @click="getValue">获取参数值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '一亿元'
      }
    },
    methods:{
      chang(){
        this.$store.commit('setName',{Name:this.msg})
      },
      getValue(){
        let name = this.$store.getters.getName;
        alert(name);
      }
    }
  }
</script>

<style>
</style>

<template>
  <div>
    <h1>Two</h1>
    {{change}}
  </div>
</template>

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

<style>
</style>

效果展示

四.Vuex的异步加载问题

1.异步修改值

src>store>actions.js

触发mutations

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

在vue组件添加异步事件

2.异步修改值到后端

后端代码

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);
    }
}

src/api/action.js 

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

在vue组件添加Ajax异步事件

好啦，今天的分享就到这了，希望能够帮到你呢！😊😊