Vue.js note11（脚手架：vuex &同级/兄弟组件传值）

╰半橙微兮° 2023-03-01 10:23 13阅读 0赞

### 文章目录 ###

*   *   *  一、同级/兄弟组件传值
         *   *   *   *  兄弟组件传值----传统
                     *  兄弟组件传值----中央事件总线
                     *  总结：事件总线创建流程
                     *  小栗子：中央事件总线 的使用（自己练习一下 ）
         *  二、vuex
         *   *   *   *  （一）什么是vuex
                     *  （二）传统Vue使用场景
                     *  （三）Vuex应用场景
                     *  （四）Vuex核心概念
                     *  （五）引入Vuex 并 简单使用
         *  三、vuex--State 数据源：创建数据的地方
         *   *   *   *  （七）vuex--state扩展知识点
                     *  （八）Vue中全局引用资源包的方式
         *  四、vuex中的 Mutations：修改数据
         *   *   *   *  （一）定义 和 调用
                     *  （二）vuex--Mutations 提交载荷（Payload）
                     *  （三）多个参数，可以对象方式传递
                     *  （四）vuex中页面刷新数据丢失问题
         *  五、vuex中的 Actions：处理异步操作
         *   *   *   *  vuex--Actions总结
                     *  下面来看一下actions异步操作的流程：（把axios、mutations联系起来了）
         *  六、vuex--Getters：计算属性
         *   *   *   *  vuex的Getter特性是？
         *  七、vuex--modules
         *   *   *   *  （一）定义 及 使用
         *  八、vuex综合练习
         *  九、vuex--严格模式
         *  十、vuex--表单处理
         *  十一、在vuex中，用 axios 请求环境配置 （一般别这么做，要封装啊）
         *  vuex--课下总结记忆
         *  关键点总结

### 一、同级/兄弟组件传值 ###

对于兄弟组件传值的问题，目前有两种解决办法，“传统” 和 “中央事件总线”。下面来依次看一下。不过要提前注意一点，面试的时候如果被问到这个问题，一定提倡中央事件总线法。而实际工作中，这一块用的地方不多。

###### 兄弟组件传值----传统 ######

比如，在需要传值的兄弟组件之上创建一个父组件，A逆向给父组件，父组件再正向传给B组件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

###### 兄弟组件传值----中央事件总线 ######

中央事件总线的方法有点像逆向传值，需要先抛发事件；但与逆向传值不同的是：直接抛给vue实例，另外一个兄弟级组件就可以直接使用了。

在src/下创建一个文件夹用来存放xxx.js文件，在其中只需创建一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。  
![在这里插入图片描述][20200724164003596.png]  
现在创建一个A组件，引入事件总线的js文件，接着添加一个按钮并绑定一个点击事件，进行自定义事件抛出；  
`eventBridge.$emit("自定义事件名称",传递的数据)`：自定义事件并发布。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
再创建一个B组件，引入eventBus事件总线，在mounted钩子，监听了自定义事件，并把传递过来的字符串参数传递给了on监听器的回调函数；  
`eventBridge.$on("自定义事件名称",(msg)=>{将接收到的数据进行处理})`. $on:监听当前实例上的自定义事件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

###### 总结：事件总线创建流程 ######

1、创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁。  
2、在需要传值的组件中用bus.emit触发一个自定义事件，并传递参数(emit前加美元符)。  
3、在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数。

传统方法：先逆传给父组件，然后正向传值给同级子组件  
中央事件总线：大大减少了事件之间的耦合性

###### 小栗子：中央事件总线 的使用（自己练习一下 ） ######

验证的需求：两个兄弟组件之间可以互相通信，单页面上子组件与父组件之间也能够实现通信。

1、在src下新建目录 /eventBridge/index.js，写一个vue实例，用作组件之间通信的桥梁。

import Vue from "vue"
    
    // 创建一个Vue实例
    export default new Vue

2、新建两个子组件bookson1.vue与bookson2.vue，1用来发送数据，2用来接收数据。然后注意一个点，不管是发送还是接受数据，都要先导入桥梁即`import eventBridge from "@/eventBridge/index.js"`。

son1的逻辑：点击按钮，发送本组件里的一个变量，通过bool控制发送的数据，bool为true是发送this.value1，为false时发送this.value2，这样可以看出连续发送的数据变化。发送的关键代码是`eventBridge.$emit("key",this.value2)`。

//bookson1.vue
    
    <template>
        <div>
            book--son--1  <button @click="send()">发送数据</button> 
        </div>
    </template>
    <script> import eventBridge from "@/eventBridge/index.js" export default { data() { return { value1:"first:son1-->son2", value2:"second:son1-->son2", bool:true, } }, methods: { send(){ if(this.bool) eventBridge.$emit("key",this.value1) else eventBridge.$emit("key",this.value2) this.bool=!this.bool; } }, } </script>

son2的逻辑：在钩子函数中调用 $ on接口，监听自定义事件，回调函数处理接受到的数据。接收的关键代码是`eventBridge.$on("key",(msg)=>{ this.text=msg})`。

//bookson2.vue
    
    <template>
        <div>
            book--son--2：<span>{
       {text}}</span>
        </div>
    </template>
    <script> import eventBridge from "@/eventBridge/index.js" export default { data() { return { text:"son2--初始数据" } }, mounted() { eventBridge.$on("key",(msg)=>{ this.text=msg; console.log(msg); }) }, } </script>

3、然后将两个子组件导入到父组件中。同时，在父组件里面接收son1发布的数据，看是否能够接收到。

<template>
        <div class="top_content">
            图书<br><br>
             <BookSon1 />
            <BookSon2 />
             <br> <br><hr>
            <Erlink/>
           <br><br>
            <router-view/>
              <br><br><hr>
             子传给父的值：{
       {sonToFa}}
        </div>
    </template>
    <script> import Erlink from "%/erlink.vue" import BookSon1 from "vs/bookson1.vue" import BookSon2 from "vs/bookson2.vue" import eventBridge from "@/eventBridge/index.js" export default { components:{ Erlink,BookSon1,BookSon2 }, data() { return { sonToFa:'initial data' } }, mounted() { eventBridge.$on("key",(msg)=>{ this.sonToFa=msg; }) }, } </script>
    <style scope> .about{ margin:10px 0} </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]  
验证结果总结：由子组件son1发布的数据，不仅子组件son2能收到，二级路由里面的组件，甚至是父组件也能收到。这说明了，自定义事件的发布不只局限于兄弟组件之间，应该是可以在组件与组件之间进行通信。

### 二、vuex ###

最开始就得注意：在写vuex的时候可以使用脚手架，记得新建项目时预先设置vuex，以减少我们的代码量；如果是最开始建项目没有设置，而后期需要使用vuex，也可以即时安装：`npm install --save vuex` 。

###### （一）什么是vuex ######

Vuex 是一个专为 Vue.js 应用程序开发中管理的一个模式。通过创建一个**集中的数据存储**，方便程序中的**所有组件**进行访问。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]

###### （二）传统Vue使用场景 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]

**传统vue是单向数据流。**

<table> 
 <tbody> 
  <tr> 
   <td align="left"> 怎么理解单向？我在知乎上看到了一则很有道理的话：<br><br> 在数据从父组件通过 props 传给子组件的过程中，子组件只接收父组件传来的 props，并且响应父组件传来的 props 的变化，而不能直接修改 props 来影响父组件。从这个点上，这两个框架确实都是单向数据流。<br><br>但是，在具体细节上，无论是 react 还是 vue，都可以实现双向绑定。vue 不用说，由 v-model 可以实现，react 官方则介绍了一种 linkState 的技术来实现双向绑定。虽然 react 生态里你可能没听过双向数据绑定，但是，其实现的原理，vue react 其实都是一样的，就是通过 value 传递值到子组件中，在通过 change 事件回写数据，把这两个事情写到一个东西里面，就是所谓的 two way binding。<br><br>所以，不是框架都是单向数据流，而是开发社区默认按照单向数据流的范式去开发自己的应用。<br><br>（转载于知乎：否子戈---https://www.zhihu.com/question/315844790/answer/1195280511） </td> 
  </tr> 
 </tbody> 
</table>

###### （三）Vuex应用场景 ######

友友1说：其实对于vuex的应用场景一开始我有点误区，因为我把它当做了一个从始至终类似于 localstorage的存在。后来发现一刷新页面，vuex中的state存放的数据会丢失。因为它只是在当前页面初始化生成的一个实例，你一刷新页面所有数据重新生成，数据就没了。  
所以，vuex只能用于单个页面中不同组件（例如兄弟组件）的数据流通。  
\---------参考：[Vue2.0 探索之路——vuex入门教程和思考][Vue2.0 _vuex]

友友2说：vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会更便捷。  
由于vuex中的state存放的数据在页面刷新时会丢失，vuex只能用于单个页面中不同组件（例如兄弟组件）的数据流通。  
\---------JeecgBoot开发文档：[vuex 使用详解][vuex]（页面多处参考）

###### （四）Vuex核心概念 ######

1、store：类似容器，包含应用的大部分状态

<table> 
 <tbody> 
  <tr> 
   <td align="left"> 一个页面只能有一个容器；<br> 状态存储是响应式的；<br> 不能直接改变store中的状态，唯一途径显示地提交mutations；<br> 在actions里面，也不能直接更改state里面的状态值，必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值；<br> 如果要再次请求异步，那么就是dispatch一个actions 。 </td> 
  </tr> 
 </tbody> 
</table>

2、State：包含所有应用级别状态的对象

3、Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed

4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions

5、Actions：包含异步操作、提交mutations改变状态

6、Modules：将store分割成不同的模块

###### （五）引入Vuex 并 简单使用 ######

1、安装vuex：`npm install --save vuex`

2、新建一个store文件夹（这个不是必须的），并在文件夹下新建index.js文件，文件中引入我们的vue和vuex 。  
![在这里插入图片描述][20200725105155498.png]  
3、创建store实例：

单一状态树：Vuex 使用单一状态，**用一个对象就包含了全部的应用层级状态**。至此它便作为一个“ 唯一数据源 ”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。（这里提前提一句，如果数据很多的话，可以写在不同模块里面，然后引入到store里）  
![在这里插入图片描述][20200724201609555.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]  
4、在main.js 中引入新建的store

因为store这个文件夹与脚手架没啥关系，所以要建立关系。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 7]

其它友友们的写法：------------------------------

import store from './store/'
    
     new Vue({ 
          el: '#app',
          router,
          store,//使用store
          template: '<App/>',
          components: {  App }
        })

一对大括号的原因是，指定要从其他模块导入的变量名。  
![在这里插入图片描述][20200724201652242.png]  
![在这里插入图片描述][20200724201655551.png]

### 三、vuex–State 数据源：创建数据的地方 ###

1、创建数据

vuex中的数据源 state，我们需要保存的数据就保存在这里。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 8]

2、vuex–页面使用数据源

*  在组件页面中：使用`$store.state.xxx`
 *  在js中：使用`this.$store.state.xxx`

（1）可以使用$store.state.xx调用，比如在页面内调用或者在钩子函数中使用  
![在这里插入图片描述][20200724201712491.png]![在这里插入图片描述][20200724201717424.png]

（2）使用数据的组件中使用计算属性调用 this.$store.state.xxx  
![在这里插入图片描述][20200724201728612.png]  
（3）其他vuex里对象（state、actions、getters）的使用方法

1.读取store里的值：
    
    this.$store.state.字段名 
    如果有 moudle 的话，假设叫 user ,那么取值又要变了，加上 module 名
    
    this.$store.state.user.字段名 
    
    2.发起操作请求:
    
    this.$store.dispatch('action中的方法名' , '参数') ;
    
    参数你可以随便传json
    
    3.getters的用法
    
    this.$store.getters.filterDoned 
    filterDoned 是在 todo 里写的一个 getters 方法，就这么调用噢

###### （七）vuex–state扩展知识点 ######

1、，Vuex被称为状态管理工具，又或者状态仓库，数据仓库。Vuex就是一个仓库（谁想用，谁去拿），仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data 。  
（以后提到状态，就想到数据啊；模型、状态，都理解为数据）

2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新 。

3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中 。

4、传统的单向数据流可以实现组件之间的数据传递，如正传、逆传；而vuex可以实现组件与组件之间的数据流动。

###### （八）Vue中全局引用资源包的方式 ######

分为两种，不过**首先**要引用`vue：import Vue from 'vue'`，然后引入其他资源包：

1、Vue中专门的资源，比如vuex：

import Vuex from "vuex"
    Vue.usr(Vuex)

2、Vue中引用外部的插件，比如axios

import axios from 'axios'
    Vue.prototype.axios = axios

### 四、vuex中的 Mutations：修改数据 ###

mutations给修改state的方法提供一个位置，但是注意在mutations的修改方法中，第一个参数是store里的state，第二个参数是接受调用时传入的参数。

如果想传递多个参数，在调用mutations的时候，使用的是this.$store.commit(“调用的修改函数名”,传递参数)。

###### （一）定义 和 调用 ######

1、定义修改方法  
mutations：里面定义着一些**改变数据方法的集合**，就是把我们写的处理数据逻辑方法全部放在mutations里面（比如当触发事件，需要改变state里的数据，就使用mutations）。  
![在这里插入图片描述][20200724202110885.png]  
2、组件内使用`this.$store.commit("mutations里的函数名,payload载荷参数")` 来进行调用。  
![在这里插入图片描述][20200724202114605.png]

###### （二）vuex–Mutations 提交载荷（Payload） ######

之前的只是一个简单的修改state中的属性，但在实际项目中往往会有值传递给Mutations。

可以给store.commit传一个附加参数，这个参数就叫做mutation的载荷，英文名payload。由官方提供，用作修改数据时的传值。  
![在这里插入图片描述][20200724202134453.png]  
![在这里插入图片描述][20200724202139376.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 9]

###### （三）多个参数，可以对象方式传递 ######

`this.$store.commit('add', { 'num': 20 } )`

###### （四）vuex中页面刷新数据丢失问题 ######

使用vue进行开发的过程中，状态管理工具一般使用vuex进行管理。但是修改后的vuex数据存储在内存中，所以当前页面刷新数据会产生丢失现象。

如何解决？使用H5新特性本地存储。

created () { 
      //在页面加载时读取localStorage里的状态信息
      if (localStorage.getItem("data") ) { 
          //replaceState替换数据 Object.assign合并对象
          this.$store.replaceState(Object.assign({ }, this.$store.state,JSON.parse(localStorage.getItem("data"))))
      } 
      //在页面刷新时将vuex里的信息保存到localStorage里
      window.addEventListener("beforeunload",()=>{ 
          localStorage.setItem("data",JSON.stringify(this.$store.state))
      })
    },

### 五、vuex中的 Actions：处理异步操作 ###

如果从后端获取了数据，需要更改state里的数据，不能在mutations里写ajax请求，也不能直接给你在axios中写，那在哪写？在vuex的对象Actions里。

**Actions 进行操作，使用 Actions 处理异步操作（异步请求） 。**  
![在这里插入图片描述][20200725150641346.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 10]

分发 Action：一个Action 通过 `this.$store.dispatch("xxxx");`方法触发。  
![在这里插入图片描述][2020072420230437.png]  
**Action同样支持载荷。**  
![在这里插入图片描述][20200724202326987.png]  
![在这里插入图片描述][20200724202330163.png]  
形参 context 代表 this.$store ，可以在actions的方法里面调用mutations里的方法修改数据。  
![在这里插入图片描述][20200724202334404.png]

###### vuex–Actions总结 ######

上面用到了this.$store.commit()方法调用mutations里的方法修改数据。

我们可以把数据请求都放在actions里，那么问题又来了，请求来的数据如何给state？  
使用mutations。可以在axios里面调用mutations，使用commit调用。

Actions可以理解为，将mutations里面处里数据的方法变成可异步的处理数据的方法。简单的说就是异步操作数据，在actions里的方法里调用封装的axios请求，不过最终还是要通过mutations来修改请求来的数据，因为只有它能操作。

记住：异步请求用actions，修改数据用mutations。

###### 下面来看一下actions异步操作的流程：（把axios、mutations联系起来了） ######

（1）要先下载axios。  
（2）引入axios，位置src/api下写数据请求，一个请求一个函数，返回一个promise对象，然后export，在使用的时候解构出来使用。  
（3）在src/store/index.js中引入刚写好的请求，在actions的函数中调用，发送请求。  
（4）如果没有后台，可以自己写一个假数据。  
（5）使用：在组件中调用actions，通过this.$store.dispatch(“方法名”);  
（6）查看数据是否被请求到。  
（7）然后渲染数据，有个方法，在actions中通过mutations修改state中的数据，由于数据响应式，页面上的内容会自动更改。

### 六、vuex–Getters：计算属性 ###

getters相当于之前组件中学习的计算属性，getters属性主要是对于state中数据的一种过滤。计算属性一定要有返回值。

使用场景：在项目开发中，有时候希望对state中的某个属性，在多个组件中展示出不同状态。

1、定义Getters数据  
跟state等同级写，语法是 getters：\{\} 要return  
![在这里插入图片描述][20200725151621448.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 11]  
2、vuex–使用Getters数据  
与使用state相同，在组件中的计算属性当中使用，`this.$store.getters.函数名`来进行调用。  
![在这里插入图片描述][20200724201851916.png]

###### vuex的Getter特性是？ ######

（1）getters 可以对State进行计算操作，它就是Store的计算属性；  
（1）虽然在组件内也可以做计算属性，但是 getters 可以在**多组件之间复用**；  
（1）如果一个状态只在一个组件内使用一次或者使用了多次，但是展示的形态相同，可以不用getters。

**我的解释：** 有一个视图污染的问题，就是state状态数据可能在很多地方使用，所以如果使用了多次，而每一次都想展示不同的形态，那么在vuex中，拥有跟vue中计算属性类似的就是Getter。

### 七、vuex–modules ###

在Vue中State使用的是单一状态树结构，所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

那么可不可以让每一个组件对应一个小模块，有，可以通过vuex的modules属性对象。

module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

###### （一）定义 及 使用 ######

先定义一个组件的模块，使用es6暴露，然后在src/store/index.js中引入，因为使用es6暴露，所以要解构出来，然后在index.js中的modules这个属性中声明这个组件的模块。

1、创建文件容纳模块  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 12]  
2、在vuex中引用模块  
![在这里插入图片描述][20200724202432985.png]  
3、使用数据：$store.state.模块名.xxx  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 13]  
4、修改数据：和没有modules的时候一样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][2020072420250377.png]  
5、在模块路面请求数据时，记得把封装的请求导入进来。  
![在这里插入图片描述][20200730104405683.png]  
到目前为止，vuex的基本语法就基本介绍完了。

### 八、vuex综合练习 ###

现在通过一个例子，综合看一下vuex是怎么用的。之前的vuex的安装及main.js里面的配置不再赘述。

需求：  
![在这里插入图片描述][20200725163649997.png]  
开始：  
![在这里插入图片描述][20200725163738230.png]

import Vue from "vue"
    import Vuex from "vuex"
    // 引入封装的axios数据请求
    import { vuexActionsAxios} from "&/vuexApi.js"
    
    Vue.use(Vuex) //全局引用vuex
    
    export const store = new Vuex.Store({ 
        // state 是vuex中存放数据的地方
        state: { 
            name: "sky",
            obj: { 
                uname: "xixi",
                age: 28
            },
            demoData: { }
        },
        // 都是修改操作
        mutations: { 
            upDate(state, payload) { 
                // state 形参 使用的话，数据会直接传过来
                // payload 载荷，用来动态传值
                state.obj.uname = payload.uname;
                state.obj.age = payload.age;
            },
            muadd(state, payload) { 
                // 把actions请求来的数据赋值给state.obj.uname，被更改后的数据可以自动响应到页面上
                state.obj.uname = payload;
            }
        },
        // actions处理异步操作
        actions: { 
            // store 形参 代表this.$store 
            oneAct(store, payload) { 
                vuexActionsAxios().then((ok) => { 
                    console.log(ok);
                    store.commit('muadd', ok.data.name);//调用mutations中的方法
                }).catch((err) => { 
                    console.log(err);
                })
    
                // 不过在actions里面接收参数的场景比较少
                console.log(payload);//动态参数
            }
        },
        // vuex中的计算属性
        getters: { 
            newAge(state) { 
                return "<<" + state.obj.age + ">>"
            }
        }
    })

使用actions时要引入封装好的axios请求，文件如下  
![在这里插入图片描述][20200725164259445.png]

import axios from "axios"
    
    export function vuexActionsAxios(){ 
        return new Promise((resolve,reject)=>{ 
            axios({ 
                url:"/book/vuexData",
                method:'get'
            }).then((ok)=>{ 
                resolve(ok);
            }).catch((err)=>{ 
                reject(err);
            })
        })
    }

使用axios请求数据的地址来自mock模拟数据，mock的数据及配置文件如下  
![在这里插入图片描述][20200725164433493.png]  
![在这里插入图片描述][20200725164507723.png]  
最后在父组件里面，使用vuex的store的各种数据和方法。如下  
![在这里插入图片描述][2020072516510370.png]

<template>
      <div class="top_content">
        广播-----------------------
        <br /><br /> <hr />   
        <p>vuex相关操作：</p>
        <p>拿取store的state中的数据：{
       {$store.state.obj.uname}}</p>
        <button @click="update()">mutations点击更改obj中的数据</button>
        <br /><br />
        <button @click="changeData()">actions异步请求：修改state里的数据</button>
        <br><br>
        <p>getters过滤obj的age属性：{
       {newage}}</p>
      </div>
    </template>
    <script> export default { methods: { update() { // 通过mutations里的upDate方法，更新vuex的state里obj的数据 this.$store.commit("upDate", { uname: "Linda", age: "800" }); //传递多个参数用对象 }, changeData() { this.$store.dispatch("oneAct","actions支持载荷"); }, }, computed: { newage(){ // 使用getters里的计算属性相关方法 return this.$store.getters.newAge } }, created() { // vuex中调用actions中操作异步请求的方法 // this.$store.dispatch("oneAct"); //在页面加载时读取localStorage里的状态信息 // if (localStorage.getItem("data")) { // //replaceState替换数据 Object.assign合并对象 // this.$store.replaceState( // Object.assign( // {}, // this.$store.state, // JSON.parse(localStorage.getItem("data")) // ) // ); // } // //在页面刷新时将vuex里的信息保存到localStorage里 // window.addEventListener("beforeunload", () => { // localStorage.setItem("data", JSON.stringify(this.$store.state)); // }); }, }; // http://www.weather.com.cn/data/cityinfo/101320101.html // http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187 </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 15]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 17]

### 九、vuex–严格模式 ###

严格模式下，无论何时发生了状态变更，并且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

开启严格模式，仅需在创建 store 的时候传入 strict: true  
![在这里插入图片描述][20200724202530653.png]  
不要在发布环境下启用严格模式！！！！！！！！！

### 十、vuex–表单处理 ###

当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手。在用户输入时，v-model 会试图直接修改 state数据；但因为是在严格模式中，由于这个修改不是在 mutation 函数中执行的，这里会抛出一个错误。

**解决方式：**  
用 Vuex 的思维解决，给 < input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用 action。  
![在这里插入图片描述][20200724202615793.png]  
调用函数。  
![在这里插入图片描述][20200724202619996.png]  
创建actions调用mutations并接收数据。  
![在这里插入图片描述][20200724202642797.png]  
使用mutations来进行修改。  
![在这里插入图片描述][20200724202649557.png]

### 十一、在vuex中，用 axios 请求环境配置 （一般别这么做，要封装啊） ###

在store文件中引用axios ： import axios from ‘axios’

通过事件触发active  
![在这里插入图片描述][20200724202704663.png]  
![在这里插入图片描述][20200724202707595.png]  
创建actions 并进行异步请求，并且调用Mutations修改state数据  
![在这里插入图片描述][20200724202721228.png]  
![在这里插入图片描述][20200724202724642.png]  
![在这里插入图片描述][20200724202728894.png]

### vuex–课下总结记忆 ###

vuex是什么  
vuex的核心概念  
为什么要用vuex

\---------JeecgBoot开发文档：[vuex 使用详解][vuex]（页面多处参考）

### 关键点总结 ###

存储数据用state，修改数据用mutations，异步请求用actions

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230209/11bb03925ce44c62a52d9bc4fbbe29c4.png
[20200724164003596.png]: /images/20230209/c2220150bc554464b7db7c06bd9fdb6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/ee5c615c1b7548ccbae842f6561c84a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/8e5ca50e41b9440f847852627d7cce67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: /images/20230209/645c0fb747154f2db2330d466a40977b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]: /images/20230209/931ca3a350874e6abda41db8d2cfc015.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]: /images/20230209/41315e46eb8f46bc912e5d75f66a920b.png
[Vue2.0 _vuex]: https://www.cnblogs.com/zhangqingjia/p/6774312.html
[vuex]: http://doc.jeecg.com/1273897
[20200725105155498.png]: /images/20230209/b54d708f0a474346955612bdd4c11273.png
[20200724201609555.png]: /images/20230209/b31de1c25a2b4423b4ff66dd157a960d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]: /images/20230209/4da8362d105f4462881065479b1b5cd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 7]: /images/20230209/aae164eaf24249118702bf2b1e6f4d0c.png
[20200724201652242.png]: /images/20230209/a3cefad9ce1045848fcd36188f63388d.png
[20200724201655551.png]: /images/20230209/0abc10ee67694516a3307773c2fc19be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 8]: /images/20230209/e68dd32a72774b52a89ad3060095e2fc.png
[20200724201712491.png]: https://img-blog.csdnimg.cn/20200724201712491.png
[20200724201717424.png]: /images/20230209/def356d4c3f643c1a02d8173676d131d.png
[20200724201728612.png]: /images/20230209/3ed9cd494c0a49f4b95c1ddbfd3a02a1.png
[20200724202110885.png]: /images/20230209/dffe77a133f948c0badfe7ad7109fad6.png
[20200724202114605.png]: /images/20230209/82e140aaaa944f7c86e01e16774cb1cf.png
[20200724202134453.png]: /images/20230209/8f3a63de3ed049ad8b1bd0c5bbf8a114.png
[20200724202139376.png]: /images/20230209/fbc7344e41d14cc081485f95b1ff7d8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 9]: /images/20230209/39435b9990c94267b9e476ac68fe71fd.png
[20200725150641346.png]: /images/20230209/41d11e816ad54b4987ac424c133a2527.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 10]: /images/20230209/e1ca55023d2e44bab7ae466f4b36e113.png
[2020072420230437.png]: /images/20230209/a5ee0d2dd95547739091c4749304af3e.png
[20200724202326987.png]: /images/20230209/f7e72c8affa0458ca04ee3674a002f43.png
[20200724202330163.png]: /images/20230209/f3c20adec3844af380e2d7598b9c858a.png
[20200724202334404.png]: /images/20230209/c8b013a5582e4a5583dc8ba91a78c1b2.png
[20200725151621448.png]: /images/20230209/9d657d1b3d6443519d82c8181e696a51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 11]: /images/20230209/0754848d362b4a49851870845f663488.png
[20200724201851916.png]: /images/20230209/e55770c92bce4ed1acf62db399039d2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 12]: /images/20230209/5a651437b54c47fe82270dd5353fab01.png
[20200724202432985.png]: /images/20230209/0d97324166da4cacb1fdf8f9754f7575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 13]: /images/20230209/878c6299834f453ab7141d589fa67368.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 14]: /images/20230209/15a191d16a3a479c910aea5d0ac06769.png
[2020072420250377.png]: /images/20230209/9f881d8eace34706806a83f754154df2.png
[20200730104405683.png]: /images/20230209/04c53c25299d4ee4b1d1befddbed4d8e.png
[20200725163649997.png]: /images/20230209/bc6ffbab054f4ac1b23bc7466e1571c7.png
[20200725163738230.png]: /images/20230209/d1115bf515e5431082e5a6f85779bf8b.png
[20200725164259445.png]: /images/20230209/03d39ac10a4a4d6fab2c2c27bcdbcb8d.png
[20200725164433493.png]: /images/20230209/552bdbd6a3814d9dbba7579f77838e4a.png
[20200725164507723.png]: /images/20230209/c66f25c678b5427eb18e3d575ede8c5d.png
[2020072516510370.png]: /images/20230209/62bfaed2d95e4b35b659e651679a605d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 15]: /images/20230209/f33f7e1d64e0426fba8e1b206fa663d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 16]: /images/20230209/4d04d154db17487caaa743a62a74612d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 17]: /images/20230209/51f4d3d40df84366a3558794a4501855.png
[20200724202530653.png]: /images/20230209/5ff06df469e14065b1b2b7384668927e.png
[20200724202615793.png]: /images/20230209/86ca3d1635384aff9e5d907c94a9bb1a.png
[20200724202619996.png]: /images/20230209/a2291b655bf74e0c82d69df48bb46aa4.png
[20200724202642797.png]: /images/20230209/02e4d596ddd24dedbdd94752e9f1594c.png
[20200724202649557.png]: /images/20230209/22e0eba85d2e4658bb44932484c48780.png
[20200724202704663.png]: /images/20230209/7de1ccbbd9a34c83a174258343171812.png
[20200724202707595.png]: /images/20230209/7938b2e223db4662839525b336d25840.png
[20200724202721228.png]: /images/20230209/97fe89905ce440719ce1200716d795a1.png
[20200724202724642.png]: /images/20230209/baa0386326374cd885535936cf9773a5.png
[20200724202728894.png]: /images/20230209/7ea8cc081eb748e1b9d5a436273f45d2.png