Vuex的使用,详细易懂

简介: Vuex的使用,详细易懂

一.前言

       今天我们继续前面的Element讲解Vuex的使用,相关文章:

image.png

二.Vuex的简介

       Vuex是Vue.js的官方状态管理模式。它被设计为更好地管理应用程序的状态,并且可以轻松地与Vue.js应用程序集成。

Vuex的核心概念包括state(状态),mutations(变化),actions(动作)和getters(获取器)。

  • State:即存储数据的地方。它保存着整个应用程序的状态,并且可以在不同的组件中共享。通过在Vue组件中使用this.$store.state来访问状态。
  • Mutation : 是改变状态的唯一方式,类似于组件的methods属性。它是同步的,用于修改state中的数据。
  • Actions:Actions用于处理异步操作和提交Mutations。它们可以包含任意异步操作,例如异步请求、定时器等。Actions通过store.dispatch方法来触发。
  • Getters:Getters用于从State中派生出一些状态,类似于计算属性。它们可以通过store.getters方法来获取。

    ---------用图片的方式理解:


三.vuex的使用

       3.1 安装Vuex

       如果node.js的版本是10那么就用  npm install vuex -S

       如果node.js的版本是18或者10以上就用   npm i -S vuex@3.6.2

在设置中环境变量中可以查看:


在我们使用的文件目录下输入:        

     查看结果:

3.2 使用Vuex的步骤:

  1. 创建store:在src目录下创建store.js文件,引入Vue和Vuex,并创建一个新的Vuex.Store实例。
  2. 定义state:在store.js文件中定义一个state对象,用于存储数据。
  3. 定义mutations:在store.js文件中定义mutations对象,包含一些用于修改state的方法。
  4. 定义actions:在store.js文件中定义actions对象,包含一些用于触发mutations的方法。
  5. 在组件中使用Vuex:在需要使用state的组件中,通过this.$store.state来获取state中的数据。
  6. 在组件中触发mutations和actions:在需要修改state的组件中,通过this.store.commit来触发mutations,通过this.store.commit来触发mutations,通过this.store.dispatch来触发actions。

 

四.vuex的存值取值(改变值)

       先在src下面创建一个store目录,创建state(状态),mutations(变化),actions(动作)和getters(获取器)这四个js文件

       在state.js里面定义默认值:

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

      在mutations.js 里面设置改变值:

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

        在getters.js里面获取值:

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

在store目录下在创建一个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'
import Vuex from 'vuex'
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2,避免后期打包样式不同,要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
//添加vuex
import store from './store'
// 新添加3
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/>'
})

最后测试:

page1.vue:

<template>
  <div>
    <h1>第一个界面</h1>
    请输入:<input v-model="msg" />
    <button @click="fun1">获取值</button>
    <button @click="fun2">改变值</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
        })
        let eduName = this.$store.state.eduName;
        // alert(eduName);
      }
    }
  }
</script>
<style>
</style>

page2.vue:

<template>
  <div style="padding: 50px;padding-top: 20px;">
    <h1>页面二</h1>
    {{eduName}}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mag: '弹射下班'
      }
    },
    computed: {
      eduName() {
        return this.$store.state.eduName;
      }
    }
  }
</script>
<style>
</style>

结果:

五.vuex的异步请求

       在page1里面:

 <!-- 异步请求  同一时间可以做多件事情 -->
     <button @click="fun3">改变值</button>
 fun3(){
        this.$store.dispatch("setEduNameByAsync",{
          eduName:this.msg
        })
      },

在action.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.VUEX;
     let params = {
       resturantName: payload.eduName
     }
     _this.axios.post(url, params).then(r => {
       console.log(r);
     }).catch(e => {
       console.log(e);
     });
   }
 }

       结果:


好啦,今天的分享就到这啦!!!

相关文章
|
存储 缓存 小程序
微信小程序如何获取微信昵称和头像
微信小程序如何获取微信昵称和头像
463 0
|
Kubernetes 网络协议 关系型数据库
Kubernetes----ExternalName类型的Service
Kubernetes----ExternalName类型的Service
2667 0
|
Kubernetes jenkins 持续交付
Kubernetes CI/CD 集成:持续交付的最佳实践
【8月更文第29天】随着微服务架构和容器化的普及,Kubernetes 成为了运行容器化应用的事实标准。为了确保应用能够快速迭代并稳定发布,持续集成/持续部署(CI/CD)流程变得至关重要。本文将介绍如何将 Kubernetes 集成到 CI/CD 流程中,并提供一些最佳实践。
716 1
|
存储 Kubernetes 负载均衡
深入探讨Docker生态系统,Docker Compose vs. Docker Swarm vs. Kubernetes:深入比较
Kubernetes适用于大规模、复杂应用程序和多云部署,具有高度可定制的部署配置和广泛的生态系统。 在选择时,还可以考虑将它们组合使用,以满足不同环境和需求。无论选择哪个工具,容器编排都将成为现代应用程序开发和部署的不可或缺的一部分。
1507 0
|
Shell Perl
Perl 教程 之 Perl 进程管理 4
Perl教程介绍了如何进行进程管理,包括使用$$或$PROCESS_ID获取进程ID,通过%ENV访问环境变量,exit()退出子进程。fork()函数创建新进程,返回值在父、子进程中不同,常与exec配合。当子进程结束,它会发送CHLD信号给父进程,需用wait或waitpid处理僵死进程,或者设置$SIG{CHLD}为&quot;IGNORE&quot;。示例代码展示了fork和exec的用法,以及处理子进程的方法。
74 0
|
数据库 数据库管理
数据库原理—数据库管理系统的功能和特点(四)
数据库原理—数据库管理系统的功能和特点(四)
|
JavaScript 前端开发
JavaScript基础知识:`var`、`let` 和 `const` 的区别是什么?
JavaScript基础知识:`var`、`let` 和 `const` 的区别是什么?
150 0
|
异构计算
FPGA - 7系列 FPGA内部结构之SelectIO -02- 源语简介(一)
FPGA - 7系列 FPGA内部结构之SelectIO -02- 源语简介
1377 0
FPGA - 7系列 FPGA内部结构之SelectIO -02- 源语简介(一)
|
机器学习/深度学习 编解码 算法
深度学习常用数据集介绍与下载(附网盘链接)
深度学习常用数据集介绍与下载(附网盘链接)
3008 0
深度学习常用数据集介绍与下载(附网盘链接)
|
存储 SQL druid
SpringBoot2 整合 ClickHouse数据库
Yandex开源的数据分析的数据库,名字叫做ClickHouse,适合流式或批次入库的时序数据。ClickHouse不应该被用作通用数据库,而是作为超高性能的海量数据快速查询的分布式实时处理平台,在数据汇总查询方面(如GROUP BY),ClickHouse的查询速度非常快。
SpringBoot2 整合 ClickHouse数据库