• Vuex使用方式及异步问题处理

                                                      🎬 艳艳耶✌️：个人主页

                                                      🔥 个人专栏 ：《Spring与Mybatis集成整合》《Vue.js使用》

                                                       ⛺️ 生活的理想，为了不断更新自己 ! 

    目录

    1.Vuex简介：

    2.vuex获取值

    2.1安装

    2.2.菜单栏

    2.3.模块

    2.4使用

    3.改值

    4.Vuex的异步加载问题处理

    1.Vuex简介：

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的变更可追踪和可维护。

    在 Vue.js 应用中，组件之间的通信是通过 props 和事件来实现的，但是当应用变得复杂时，组件之间的通信会变得困难和混乱。Vuex 提供了一种集中式存储管理应用的状态的方式，将所有组件的共享状态抽取出来，以一个全局的单一状态树来管理。

    Vuex 的核心概念包括：

    State（状态）：Vuex 使用一个单一的状态树来管理应用的所有状态，即一个对象包含了全部的应用层级状态。可以通过 this.$store.state 来访问状态。

    Getters（获取器）：Getters 可以理解为 store 的计算属性。可以通过定义一些 getter 函数来获取 state 中的值，类似于 Vue 中的计算属性。

    Mutations（变更）：Mutations 是唯一允许修改状态的地方。每个 mutation 都有一个字符串的事件类型和一个回调函数，通过调用 store.commit 方法来触发 mutation。

    Actions（动作）：Actions 类似于 mutations，但是可以包含任意异步操作。通过调用 store.dispatch 方法来触发 action。Action 可以包含多个 mutation，通过提交 mutation 来改变状态。

    Mutations（变更）: 是 Vuex 中用于修改状态的方法。它是唯一允许修改状态的地方，类似于事件的处理器。每个 mutation 都有一个字符串的事件类型和一个回调函数，通过调用 store.commit 方法来触发 mutation。

    Modules（模块）：Vuex 允许将 store 分割成模块。每个模块拥有自己的 state、getters、mutations 和 actions，可以通过模块化的方式组织和管理复杂的应用。

               通过使用 Vuex，我们可以更好地组织和管理应用的状态，使得状态的变更更加可追踪和可维护。同时，也可以方便地在组件中获取和修改状态，简化了组件之间的通信。

    2.vuex获取值

    2.1安装

    使用CMD命令窗口，并跳转到指定工作目录下创建项目

    输入以下命令来安装Vuex:

       npm install vuex -S   (node的环境配置为10的执行这个命令)

     npm i -S vuex@3.6.2  (node的环境配置为18的执行这个命令)

    如图所示： 

    在项目中的 package.json 文件中看到如图，说明安装成功

    2.2.菜单栏

    在src中创建一个vuex的目录，在改目录下创建两个组件page1，page2.

    page1

    1. <template>
    2.   <div style="padding: 50px;padding-top: 20px;">
    3.     <h1>页面一</h1>
    4.     <p>state中eduName的值为: </p>
    5.       {{mag}}
    6.   </div>
    7. </template>
    8.  
    9. <script>
    10.   export default {
    11.     data() {
    12.       return {
    13.         mag: '弹射下班'
    14.       }
    15.     }
    16. }
    17. </script>
    18.  
    19. <style>
    20. </style>

    page2

    1. <template>
    2.   <div style="padding: 50px;padding-top: 20px;">
    3.     <h1>页面二</h1>
    4.     {{mag}}
    5.   </div>
    6. </template>
    7.  
    8. <script>
    9.   export default {
    10.     data() {
    11.       return {
    12.         mag: '弹射下班'
    13.       }
    14.     }
    15.   }
    16. </script>
    17.  
    18. <style>
    19. </style>

    到项目中src的router的index.js文件中配置路径

    mport page1 from '@/views/vuex/page1'
    import page2 from '@/views/vuex/page2'

    {
          path: '/vuex/page1',
          name: 'page1',
          component: page1
        },{
          path: '/vuex/page2',
          name: 'page2`',
          component: page2
        },

    在src中的components的LeftNav.vue组件中编辑(增加)代码


         
         
            页面一
         

         
            页面二
         
       

    2.3.模块

    在项目中创建store目录分别维护state/actions/mutations/getters/store

    state.js

    1. export default {
    2.   eduName: '默认值'
    3. }

    getters.js

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

    mutations.js

    1. export default {
    2.   // type(事件类型)： 其值为setEduName
    3.   // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器
    4.   setEduName: (state, payload) => {
    5.     state.eduName = payload.eduName;
    6.   }
    7. }

    actions.js 暂时不写代码

    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.4使用

    在src中的main.js进行引用

    1. //导入并使用store实例
    2. import store from './store'
    3.  
    4. /* eslint-disable no-new */
    5. new Vue({
    6.   el: '#app',
    7.   router,
    8.   store,
    9.   data(){
    10.     return{
    11.       bus :new Vue()
    12.     }
    13.   },
    14.   components: { App },
    15.   template: ''
    16. })

    在Vuex01.vue组件中编写代码

    1. <template>
    2.   <div style="padding: 50px;padding-top: 20px;">
    3.     <h1>页面一</h1>
    4.     <p>state中eduName的值为: </p>
    5.     <!-- {{mag}} -->
    6.     <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    7.     <el-row style="margin-top: 20px;">
    8.       <el-button type="primary" plain @click="hq">获取state</el-button>
    9.      </el-row>
    10.   </div>
    11. </template>
    12.  
    13. <script>
    14.   export default {
    15.     data() {
    16.       return {
    17.         mag: '默认值'
    18.       }
    19.     },
    20.     methods: {
    21.       hq() {
    22.         let eduName = this.$store.state.eduName;
    23.         alert(eduName);
    24.       }
    25.     }
    26.   }
    27. </script>
    28.  
    29. <style>
    30. </style>

    效果展示：

    3.改值

    在page1.vue组件中编写代码

    1. <template>
    2.   <div style="padding: 50px;padding-top: 20px;">
    3.     <h1>Vuex01</h1>
    4.     <p>state中eduName的值为: </p>
    5.     <!-- {{mag}} -->
    6.     <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    7.     <el-row style="margin-top: 20px;">
    8.       <el-button type="primary" plain @click="hq">获取state</el-button>
    9.       <el-button type="primary" plain @click="xg">修改state</el-button>
    10.     </el-row>
    11.     <!-- {{mag}} -->
    12.   </div>
    13. </template>
    14.  
    15. <script>
    16.   export default {
    17.     data() {
    18.       return {
    19.         mag: '米西米西'
    20.       }
    21.     },
    22.     methods: {
    23.       hq() {
    24.         let eduName = this.$store.state.eduName;
    25.         alert(eduName);
    26.       },
    27.       xg() {
    28.         //type(事件类型)： 这里的值为setEduName，是指mutations.js中的setEduName事件
    29.         this.$store.commit('setEduName', {
    30.           eduName: this.mag
    31.         });
    32.         //修改完成给与提示
    33.         this.$message({
    34.           showClose: true,
    35.           message: '成功修改eduName的值为 : ' + this.mag,
    36.           type: 'success'
    37.         });
    38.       },
    39.  
    40.     }
    41.   }
    42. </script>
    43.  
    44. <style>
    45. </style>

    效果图： 

    4.Vuex的异步加载问题处理

    在page1.vue组件中编写所有代码

    1. <template>
    2.   <div style="padding: 50px;padding-top: 20px;">
    3.     <h1>页面一</h1>
    4.     <p>state中eduName的值为: </p>
    5.     <!-- {{mag}} -->
    6.     <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    7.     <el-row style="margin-top: 20px;">
    8.       <el-button type="primary" plain @click="hq">获取state</el-button>
    9.       <el-button type="primary" plain @click="xg">修改state</el-button>
    10.       <el-button type="primary" plain @click="xgAsync">异步修改state</el-button>
    11.       <el-button type="primary" plain @click="xgAjax">后台请求</el-button>
    12.     </el-row>
    13.     <!-- {{mag}} -->
    14.   </div>
    15. </template>
    16.  
    17. <script>
    18.   export default {
    19.     data() {
    20.       return {
    21.         mag: '米西米西'
    22.       }
    23.     },
    24.     methods: {
    25.       hq() {
    26.         let eduName = this.$store.state.eduName;
    27.         alert(eduName);
    28.       },
    29.       xg() {
    30.         //type(事件类型)： 这里的值为setEduName，是指mutations.js中的setEduName事件
    31.         this.$store.commit('setEduName', {
    32.           eduName: this.mag
    33.         });
    34.         //修改完成给与提示
    35.         this.$message({
    36.           showClose: true,
    37.           message: '成功修改eduName的值为 : ' + this.mag,
    38.           type: 'success'
    39.         });
    40.       },
    41.         xgAsync() {
    42.           //type(事件类型)： 这里的值为setEduNameByAsync，是指actions.js中的setEduNameByAsync事件
    43.           this.$store.dispatch('setEduNameByAsync', {
    44.             eduName: this.mag
    45.           });
    46.           //修改完成给与提示
    47.           this.$message({
    48.             showClose: true,
    49.             message: '8秒后将为把eduName值改为 : ' + this.mag,
    50.             type: 'success'
    51.           });
    52.         },
    53.         xgAjax() {
    54.           //type(事件类型)： 这里的值为setEduNameByAjax，是指actions.js中的setEduNameByAjax事件
    55.           this.$store.dispatch('setEduNameByAjax', {
    56.             eduName: this.mag,
    57.             _this:this
    58.           });
    59.           //修改完成给与提示
    60.           this.$message({
    61.             showClose: true,
    62.             message: '后台请求传的eduName值为 : ' + this.mag,
    63.             type: 'success'
    64.           });
    65.         }
    66.     }
    67.   }
    68. </script>
    69.  
    70. <style>
    71. </style>

    在page2.vue组件中编写所有代码

    1. <template>
    2.   <div style="padding: 50px;padding-top: 20px;">
    3.     <h1>页面二</h1>
    4.     {{eduName}}
    5.   </div>
    6. </template>
    7.  
    8. <script>
    9.   export default {
    10.     data() {
    11.       return {
    12.         mag: '弹射下班'
    13.       }
    14.     },
    15.     computed: {
    16.       eduName() {
    17.         return this.$store.state.eduName;
    18.         
    19.       }
    20.     }
    21.   }
    22. </script>
    23.  
    24. <style>
    25. </style>

    在src的action.js中配置后台请求的地址

     'SYSTEM_VuexAjax': '/vuex/queryVuex', //Vuex的异步请求

    在src的store模块中编写actions.js

    1.  export default {
    2.    setEduNameByAsync: function(context, payload) {
    3.      setTimeout(() => {
    4.        //这里的setEduName(事件类型)是指mutations.js中的setEduName事件
    5.        context.commit('setEduName', payload);
    6.      }, 7000);
    7.      //7000是指7秒之后执行这个事件
    8.    },
    9.    setEduNameByAjax: function(context, payload) {
    10.      let _this=payload._this;
    11.      //定义后端都请求地址
    12.      let url = _this.axios.urls.SYSTEM_VuexAjax;
    13.      let params = {
    14.        resturantName: payload.eduName
    15.      }
    16.      _this.axios.post(url, params).then(r => {
    17.        console.log(r);
    18.      }).catch(e => {
    19.        console.log(e);
    20.      });
    21.    }
    22.  }

    效果展现：

    效果展现：

    后台结果：

     

  • 相关阅读:
    二次开发入门须知
    前端进击笔记第十四节 单页应用与前端路由库设计原理
    JAVA面试题总结基础篇（二）
    OpenStack云计算（十）——OpenStack虚拟机实例管理，增加一个计算节点并进行实例冷迁移，增加一个计算节点的步骤，实例冷迁移的操作方法
    java网络故障报修系统J2EE
    Redis过期策略2020-架构师（六十三）
    服装图像分类
    蓝牙科普：从2.0到5.0，蓝牙版本有何不同？
    项目：后台管理系统的开发及自动化部署
    自学的一些面试题-html
  • 原文地址：https://blog.csdn.net/2301_76988707/article/details/133743330