AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

关于Vuex的基础使用存值及异步

2023-11-10 72
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 关于Vuex的基础使用存值及异步

一.概述

Vuex 是一个用于 Vue.js 应用程序的状态管理库。它主要用于集中管理应用程序中的共享状态，使得状态的变化可追踪、可调试，并且在不同组件之间共享状态变得更加简单。


在 Vue.js 中，每个组件都有自己的状态，当应用程序的规模逐渐扩大时，状态管理变得困难。Vuex 的出现就是为了解决这个问题。它采用了集中式存储管理应用的所有组件的状态，并提供了一套规则保证状态的一致性。


Vuex 的核心概念包括 state（状态）、mutations（突变）、actions（动作）和getters（获取器）。state 是存储应用程序状态的地方，mutations 是用于修改状态的方法，actions 是用于处理异步操作的方法，getters 是对状态进行包装的方法。


通过使用 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:

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page1</h1>
    <p>state中eduName的值为: </p>
      {{mag}} 
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mag: '自然躺平'
      }
    }
}
</script>
<style>
</style>

page2:

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page2</h1>
    {{mag}}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mag: '自然躺平'
      }
    }
  }
</script>
<style>
</style>

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

import 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组件中编辑(增加)代码

    <el-submenu  index="idx" key="key">
      <template slot="title">
        <i class="el-icon-loading"></i>
        <span>VUEX使用</span>
      </template>
      <el-menu-item  index="/vuex/Vuex01" key="key01">
        <i class="el-icon-orange"></i>
        <span>VUEX01</span>
      </el-menu-item>
      <el-menu-item  index="/vuex/Vuex02" key="key02">
        <i class="el-icon-potato-strips"></i>
        <span>VUEX02</span>
      </el-menu-item>
    </el-submenu>

2.3.模块

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

state.js

export default {
  eduName: '默认值~~'
}

getters.js

export default {
  getEduName: (state) => {
    return state.eduName;
  }
}

mutations.js

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

actions.js 暂时不写代码,但要建立

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

在src中的main.js进行引用

//导入并使用store实例
import store from './store'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  data(){
    return{
      bus :new Vue()
    }
  },
  components: { App },
  template: '<App/>'
})

在Vuex01.vue组件中编写代码

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page1</h1>
    <p>state中eduName的值为: </p>
    <!-- {{mag}} -->
    <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    <el-row style="margin-top: 20px;">
      <el-button type="primary" plain @click="hq">获取state</el-button>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mag: '自然躺平'
      }
    },
    methods: {
      hq() {
        let eduName = this.$store.state.eduName;
        alert(eduName);
      }
    }
  }
</script>
<style>
</style>

效果图：

三.改值

在page1.vue组件中编写代码

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page1</h1>
    <p>state中eduName的值为: </p>
    <!-- {{mag}} -->
    <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    <el-row style="margin-top: 20px;">
      <el-button type="primary" plain @click="hq">获取state</el-button>
      <el-button type="primary" plain @click="xg">修改state</el-button>
    </el-row>
    <!-- {{mag}} -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mag: '自然躺平'
      }
    },
    methods: {
      hq() {
        let eduName = this.$store.state.eduName;
        alert(eduName);
      },
      xg() {
        //type(事件类型)： 这里的值为setEduName，是指mutations.js中的setEduName事件
        this.$store.commit('setEduName', {
          eduName: this.mag
        });
        //修改完成给与提示
        this.$message({
          showClose: true,
          message: '成功修改eduName的值为 : ' + this.mag,
          type: 'success'
        });
      },
    }
  }
</script>
<style>
</style>

效果图：

四.异步&后台请求

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

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page1</h1>
    <p>state中eduName的值为: </p>
    <!-- {{mag}} -->
    <el-input v-model="mag" placeholder="请输入要修改的内容" style="width: 180px;"></el-input>
    <el-row style="margin-top: 20px;">
      <el-button type="primary" plain @click="hq">获取state</el-button>
      <el-button type="primary" plain @click="xg">修改state</el-button>
      <el-button type="primary" plain @click="xgAsync">异步修改state</el-button>
      <el-button type="primary" plain @click="xgAjax">后台请求</el-button>
    </el-row>
    <!-- {{mag}} -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mag: '自然躺平'
      }
    },
    methods: {
      hq() {
        let eduName = this.$store.state.eduName;
        alert(eduName);
      },
      xg() {
        //type(事件类型)： 这里的值为setEduName，是指mutations.js中的setEduName事件
        this.$store.commit('setEduName', {
          eduName: this.mag
        });
        //修改完成给与提示
        this.$message({
          showClose: true,
          message: '成功修改eduName的值为 : ' + this.mag,
          type: 'success'
        });
      },
        xgAsync() {
          //type(事件类型)： 这里的值为setEduNameByAsync，是指actions.js中的setEduNameByAsync事件
          this.$store.dispatch('setEduNameByAsync', {
            eduName: this.mag
          });
          //修改完成给与提示
          this.$message({
            showClose: true,
            message: '7秒后将为把eduName值改为 : ' + this.mag,
            type: 'success'
          });
        },
        xgAjax() {
          //type(事件类型)： 这里的值为setEduNameByAjax，是指actions.js中的setEduNameByAjax事件
          this.$store.dispatch('setEduNameByAjax', {
            eduName: this.mag,
            _this:this
          });
          //修改完成给与提示
          this.$message({
            showClose: true,
            message: '7秒后将为把eduName值改为 : ' + this.mag,
            type: 'success'
          });
        }
    }
  }
</script>
<style>
</style>

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

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>page2</h1>
    {{eduName}}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mag: '自然躺平'
      }
    },
    computed: {
      eduName() {
        return this.$store.state.eduName;
      }
    }
  }
</script>
<style>
</style>

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

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

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

 export default {
   setEduNameByAsync: function(context, payload) {
     setTimeout(() => {
       //这里的setEduName(事件类型)是指mutations.js中的setEduName事件
       context.commit('setEduName', payload);
     }, 7000);
     //7000是指7秒之后执行这个事件
   },
   setEduNameByAjax: function(context, payload) {
     let _this=payload._this;
     //定义后端都请求地址
     let url = _this.axios.urls.SYSTEM_VuexAjax;
     let params = {
       resturantName: payload.eduName
     }
     _this.axios.post(url, params).then(r => {
       console.log(r);
     }).catch(e => {
       console.log(e);
     });
   }
 }

异步效果图：

后台效果图：

        好啦今天就到这里了希望能帮到你哦！！！

文章标签：
JavaScript
存储
君临沂
目录
相关文章
Ar.小白
|
存储 JavaScript 前端开发
Vuex基础使用存取值+异步请求
Vuex基础使用存取值+异步请求
Ar.小白
77 1
艳艳耶
|
存储 JavaScript Java
Vuex使用方式及异步问题处理
Vuex使用方式及异步问题处理
艳艳耶
90 0
不念那年晚春
|
存储 JavaScript 容器
Vuex的简介，存值取值的介绍以及异步请求
Vuex的简介，存值取值的介绍以及异步请求
不念那年晚春
81 0
孤留光乩
|
存储 缓存 JavaScript
Vuex存值取值与异步请求处理
Vuex存值取值与异步请求处理
孤留光乩
147 0
你都不懂
|
4月前
|
存储 前端开发 安全
React -- useState状态更新异步特性——导致获取值为旧值的问题
【7月更文挑战第13天】
你都不懂
112 5
云小君
|
存储 JavaScript
Vuex的基础使用存值及异步
Vuex的基础使用存值及异步
云小君
56 0
m0_黎明
|
6月前
|
存储 JavaScript API
vuex是什么,使用场景有哪些？有哪些属性
vuex是什么,使用场景有哪些？有哪些属性
m0_黎明
41 3
东方睿赢
|
6月前
|
JavaScript
Vue中的$nextTick方法的作用是什么？举例说明
Vue中的$nextTick方法的作用是什么？举例说明
东方睿赢
46 1
SailingByte
|
JavaScript 前端开发 API
深入理解Vue中的异步更新机制和$nextTick方法
在Vue开发中，我们经常会遇到需要在 DOM 更新完成后执行某些操作的情况。为了解决这个问题，Vue提供了`$nextTick`方法，它可以让我们在下次 DOM 更新完成后执行回调函数。本文将深入探讨Vue的异步更新机制、`$nextTick`的原理和使用场景，以及分别在 Vue2.x 与 Vue3.x 中的相同点和区别。
SailingByte
12594 48
深入理解Vue中的异步更新机制和$nextTick方法
懒大王o
|
11月前
|
存储 JavaScript 容器
VUEX的基础使用存值及异步
VUEX的基础使用存值及异步
懒大王o
50 0