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

VUEX的基础使用存值及异步

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

什么是VUEX

VUEX 是一个用于状态管理的状态容器模式（state management pattern）库，用于 Vue.js 应用程序。它允许你在应用程序中集中管理和共享状态，并提供了一组用于更改状态的规则。VUEX 的核心概念包括 store（仓库）、state（状态）、mutations（变动）和 actions（动作）。通过 VUEX，你可以更方便地跟踪和调试状态变化，以及在不同组件之间共享状态。无论是大型还是小型的 Vue.js 应用程序，VUEX 都可以帮助你更好地组织和管理应用程序的状态。

有什么作用

  1. 集中管理状态：VUEX 提供了一个全局的状态容器（store），将应用程序的状态集中存储在一个地方。这样，多个组件可以共享和访问同一个状态，避免了组件之间状态传递的复杂性。
  2. 状态共享：VUEX 允许你在应用程序的不同组件之间共享状态。这意味着，一个组件的状态变化可以被其他组件感知到，并相应地做出更新。这种状态共享可以简化组件之间的通信，提高代码的可维护性。
  3. 易于跟踪和调试状态变化：VUEX 记录了状态的变化历史，使得你可以轻松地跟踪和调试状态的变化。这对于定位和解决状态相关的问题非常有帮助。
  4. 快速的状态更新：通过定义 mutations 和 actions，VUEX 提供了一种统一且可控的方式来更新状态。这样可以确保状态的变化是可追踪和可测试的，也提供了对状态变化的约束和限制。

总之，VUEX 使得在 Vue.js 应用程序中管理和共享状态变得更加简单和高效，提高了应用的可维护性和可扩展性。

取值

思维图

安装

输入以下命令来安装Vuex:

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

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

package.json中有这些代码就代表安装成功了

菜单栏

在src中创建一个vuex的目录，在改目录下创建两个组件demo1，demo2

demo1

<template>
  <div style="padding: 60px;">
    <h1>我是第一个</h1>
    <p>改变state中的值</p>
    请输入：<input v-model="msg" />
    <button @click="fun1">获取state</button>
    <button @click="fun2">改变state</button>
    <button @click="fun3">获取state</button>
    <button @click="fun4">请求后台</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: '默认值'
      }
    },
    methods: {
      fun1() {
        // this.$store-->store/index.js 不推荐
        let eduName = this.$store.state.eduName;
        alert(eduName);
      },
      fun2() {
        this.$store.commit('setEduName', {
          eduName: this.msg
        })
      },
      fun3() {
        this.$store.dispatch('setEduNameAsync', {
          eduName: this.msg
        })
      },
      fun4() {
        this.$store.dispatch('setEduNameByAjax', {
          eduName: this.msg,
          _this:this
        })
      }
    }
  }
</script>
<style>
</style>

demo2

<template>
  <div>
    <h1>我是第二个</h1>
    {{eduName}}
  </div>
</template>
<script>
  export default{
    data(){
      return{
        msg:'默认值'
      }
    },
    computed:{
      eduName(){
        return this.$store.state.eduName;
        // return this.$store.getters.getEduName;
      }
    }
  }
</script>
<style>
</style>

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

import demo1 from '@/views/vuex/demo1'
import demo2 from '@/views/vuex/demo2'
{
      path: '/vuex/demo1',
      name: 'demo1',
      component: demo1
    },{
      path: '/vuex/demo2',
      name: 'demo2',
      component: demo2
    }

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

    <el-submenu index="idx_999" key="key_999">
      <template slot="title">
        <span>vuex管理</span>
      </template>
      <el-menu-item index="/vuex/demo1" key="key_99901">
        <span>页面1</span>
      </el-menu-item>
      <el-menu-item index="/vuex/demo2" key="key_99902">
        <span>页面2</span>
      </el-menu-item>
    </el-submenu>

模块

state.js

export default{
  eduName:'沸羊羊课堂开课啦',
}

getters.js

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

mutations.js

export default{
  setEduName:(state,payload)=>{
    state.eduName = payload.eduName;
  }
}

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

引用

在mian.js中引用

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发坏境才会引入mockjs
// process.env.MOCK && require('@/mock')
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store'
Vue.use(ElementUI)
Vue.config.productionTip = false
import axios from '@/api/http'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
 data(){
   return{
     Bus:new Vue()
   }
 },
  components: { App },
  template: '<App/>'
})

取值

<template>
  <div style="padding: 60px;">
    <h1>我是第一个</h1>
    <p>改变state中的值</p>
    请输入：<input v-model="msg" />
    <button @click="fun1">获取state</button>
    <button @click="fun2">改变state</button>
    <button @click="fun3">获取state</button>
    <button @click="fun4">请求后台</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: '默认值'
      }
    },
    methods: {
      fun1() {
        // this.$store-->store/index.js 不推荐
        let eduName = this.$store.state.eduName;
        alert(eduName);
      },
      fun2() {
        this.$store.commit('setEduName', {
          eduName: this.msg
        })
      },
      fun3() {
        this.$store.dispatch('setEduNameAsync', {
          eduName: this.msg
        })
      },
      fun4() {
        this.$store.dispatch('setEduNameByAjax', {
          eduName: this.msg,
          _this:this
        })
      }
    }
  }
</script>
<style>
</style>

异步

demo1

<template>
  <div style="padding: 60px;">
    <h1>我是第一个</h1>
    <p>改变state中的值</p>
    请输入：<input v-model="msg" />
    <button @click="fun1">获取state</button>
    <button @click="fun2">改变state</button>
    <button @click="fun3">获取state</button>
    <button @click="fun4">请求后台</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: '默认值'
      }
    },
    methods: {
      fun1() {
        // this.$store-->store/index.js 不推荐
        let eduName = this.$store.state.eduName;
        alert(eduName);
      },
      fun2() {
        this.$store.commit('setEduName', {
          eduName: this.msg
        })
      },
      fun3() {
        this.$store.dispatch('setEduNameAsync', {
          eduName: this.msg
        })
      },
      fun4() {
        this.$store.dispatch('setEduNameByAjax', {
          eduName: this.msg,
          _this:this
        })
      }
    }
  }
</script>
<style>
</style>

demo2

<template>
  <div>
    <h1>我是第二个</h1>
    {{eduName}}
  </div>
</template>
<script>
  export default{
    data(){
      return{
        msg:'默认值'
      }
    },
    computed:{
      eduName(){
        return this.$store.state.eduName;
        // return this.$store.getters.getEduName;
      }
    }
  }
</script>
<style>
</style>

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

'VUEX_AJAX': '/vuex/queryVuex', //Vuex的后台异步请求

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

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

效果图展示


文章标签：
JavaScript
容器
存储
懒大王o
目录
相关文章
Ar.小白
|
11月前
|
存储 JavaScript 前端开发
Vuex基础使用存取值+异步请求
Vuex基础使用存取值+异步请求
Ar.小白
62 1
艳艳耶
|
10月前
|
存储 JavaScript Java
Vuex使用方式及异步问题处理
Vuex使用方式及异步问题处理
艳艳耶
76 0
不念那年晚春
|
11月前
|
存储 JavaScript 容器
Vuex的简介，存值取值的介绍以及异步请求
Vuex的简介，存值取值的介绍以及异步请求
不念那年晚春
59 0
孤留光乩
|
11月前
|
存储 缓存 JavaScript
Vuex存值取值与异步请求处理
Vuex存值取值与异步请求处理
孤留光乩
132 0
君临沂
|
10月前
|
存储 JavaScript
关于Vuex的基础使用存值及异步
关于Vuex的基础使用存值及异步
君临沂
58 0
你都不懂
|
2月前
|
存储 前端开发 安全
React -- useState状态更新异步特性——导致获取值为旧值的问题
【7月更文挑战第13天】
你都不懂
70 5
朝阳39
|
2月前
|
前端开发 JavaScript
react18【系列实用教程】useState —— 声明响应式变量（2024最新版）含useState 的异步更新机制，更新的合并，函数传参获取更新值，不同版本异步更新差异，更新对象和数组
react18【系列实用教程】useState —— 声明响应式变量（2024最新版）含useState 的异步更新机制，更新的合并，函数传参获取更新值，不同版本异步更新差异，更新对象和数组
朝阳39
100 0
云小君
|
11月前
|
存储 JavaScript
Vuex的基础使用存值及异步
Vuex的基础使用存值及异步
云小君
49 0
m0_黎明
|
4月前
|
存储 JavaScript API
vuex是什么,使用场景有哪些？有哪些属性
vuex是什么,使用场景有哪些？有哪些属性
m0_黎明
31 3
SailingByte
|
JavaScript 前端开发 API
深入理解Vue中的异步更新机制和$nextTick方法
在Vue开发中，我们经常会遇到需要在 DOM 更新完成后执行某些操作的情况。为了解决这个问题，Vue提供了`$nextTick`方法，它可以让我们在下次 DOM 更新完成后执行回调函数。本文将深入探讨Vue的异步更新机制、`$nextTick`的原理和使用场景，以及分别在 Vue2.x 与 Vue3.x 中的相同点和区别。
SailingByte
12572 48
深入理解Vue中的异步更新机制和$nextTick方法