VUEX全网最详细讲解之一

简介: VUEX全网最详细讲解之一

一.Vuex简介

Vuex 是一个用于 Vue.js 应用程序的状态管理模式和库。它以集中式存储管理应用的所有组件的状态,并提供可预测的状态变化。Vuex 主要解决了多个组件之间共享状态和数据管理的问题。

Vuex 的核心概念包括:

  1. State(状态): Vuex 使用单一状态树(Single State Tree)来存储应用程序的所有状态。State 是驱动应用的数据源,可以通过 this.$store.state 来访问。
  2. Mutation(变化): Mutation 是修改状态的唯一途径,它定义了对状态的修改操作。每个 Mutation 都有一个字符串类型的事件类型和一个回调函数,在回调函数中实际地改变状态。可以通过提交(commit)一个 Mutation 来修改状态,通过 this.$store.commit 进行提交。
  3. Action(动作): Action 类似于 Mutation,但是可以包含异步操作。Action 提交 Mutation 来间接地改变状态,可以用于处理异步操作、封装复杂逻辑、触发多个 Mutation 等。通过分发(dispatch)一个 Action 来触发它,通过 this.$store.dispatch 进行分发。
  4. Getter(获取器): Getter 可以理解为计算属性,用于从状态中派生出新的状态。Getter 提供一个访问函数,可以根据应用程序的状态进行动态计算,类似于对 Store 数据的过滤、格式化等操作。
  5. Module(模块): Module 允许将 Store 拆分成多个模块,每个模块都有自己的 state、mutation、action、getter。模块化可以使得状态管理更加灵活和可维护,尤其对于大型应用程序很有用。

使用 Vuex 可以使得数据的流动更加清晰和可追踪,方便在复杂的应用中进行状态管理。它能够解决跨组件共享状态的问题,并提供一套明确的规则来定义和修改状态的逻辑。在大型项目中,使用 Vuex 可以使得数据流的管理和调试更加容易和高效。

二.vuex的存值取值

首先使用npm i -S vuex@3.6.2在cmd窗口中下载插件

建立两个界面分别为:page1,page2

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

在leftave中编写页面

建立一个目录在目录里面建立4个js文件

state定义变量

export default{
  eduName:'遇人不淑',
  aname:'',
  bname:''
}

mutations改变变量

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

getters获取变量

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

包裹以上四个js文件index

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

在main.js中添加store 目录

编写page1

 

<template>
  <div style="padding: 60px;">
    <h1>第一个页面</h1>
    <p>改变state中的值</p>
    请输入人名称:<input v-model="msg"/>
    <button @click="fun1">获取state</button>
    <button @click="fun2">改变state</button>
  </div>
</template>
<script>
  export default{
    data() {
      return{
        msg:'默认值'
      }
    },
    methods:{
      fun1(){
        let eduName =this.$store.state.eduName;
        alert(eduName);
      },
      fun2(){
        this.$store.commit('seteduName',{
          eduName:this.msg
        })
      }
    }
  }
</script>
<style>
</style>

编写page2

<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>
测试结果

三.vuex异步请求

在page1中编写

<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(){
        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('seteduNameAjax',{
          eduName:this.msg,
          _this:this
        })
      }
    }
  }
</script>
<style>
</style>

在actions.js中编写代码

export default{
  seteduNameAsync:(context,payload)=>{
    setTimeout(function() {
      context.commit('seteduName',payload);
    },10000);
  },
  seteduNameAjax:(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=>{
    })
  }
}

编写后台异步请求

测试结果

260503d5cbc94970a53da499590209f6.gif

f60b7cba97e249558eca3da024d8d129.gif

目录
相关文章
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
29 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
2月前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
|
1月前
|
JavaScript
vue尚品汇商城项目-day02【14.vuex状态管理库】
vue尚品汇商城项目-day02【14.vuex状态管理库】
26 0
|
1月前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
34 0
|
4月前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
579 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
6月前
|
资源调度 JavaScript
|
前端开发
前端工作总结173-vuex很强大
前端工作总结173-vuex很强大
76 0
前端工作总结173-vuex很强大
|
存储 JavaScript 容器
挑战全网最幽默的Vuex系列教程:第一讲 Vuex到底是什么鬼
Vuex 是 Vue.js 的座驾,所以,如果还不懂Vue.js 的话,那还是先把 Vue.js 勾搭上了再带过来一起坐坐吧。当然,既然能够溜达到这里,想必跟 Vue.js 起码也已经是朋友了吧。
135 0