vue基础——java程序员版(vuex)

​ vuex可以定义共享数据。

1、主要结构

src/store/index.js 是使用vuex的核心js文件。

  • 定义数据:state

  • 修改数据(同步):mutations

  • 修改数据(异步):action=调用=>mutations

    下面定义了一个公共数据msg ,mutations方法setName,action方法sendAjax

js 复制代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义共享数据,{{$store.state.msg}}展示,所以得组件都可以使用
  state: {
    msg:'这是vuex的公共消息',
  },
  getters: {
  },
  // 只能由mutations来实现修改,必须是同步操作
  mutations: {
    // state代表的是上面的state必须同名,但是后面的参数是形参名字随意,调用:this.$store.commit('setName','新的信息!');
    setName(state,newMsg){
      state.msg=newMsg;
    }
  },
  // action可以调用mutations,在action可以执行异步操作(Ajax),调用:this.$store.dispatch('sendAjax');
  actions: {
    // 通过传入context来调用mutations方法
    sendAjax(context){
      /**
       * 执行Ajax
       */
      context.commit('setName','异步修改的信息');
    },

  },
  modules: {
  }
})

2、操作共享数据

​ {{$store.state.msg}}展示数据msg,update1()调用mutations的setName方法修改msg,update2()调用action的sendAjax方法修改msg。

vue 复制代码
<template>
<div>
  <h1>
    {{$store.state.msg}}
  </h1>
  <input type="button" value="直接修改共享数据" @click="update1()"/>
  <input type="button" value="异步修改共享数据" @click="update2()"/>
</div>
</template>
<script>
    export default {
      methods:{
        update1(){
          // 第一个参数是mutations定义的函数名,第二个是参数
          this.$store.commit('setName','新的信息!');
        },
        update2(){
          // 调用action方法,指定调用的函数名
          this.$store.dispatch('sendAjax');
        }
      }
    }
</script>
相关推荐
愚昧之山绝望之谷开悟之坡5 分钟前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1715 分钟前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记16 分钟前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽17 分钟前
flutter中 getx 的使用
前端
小咕聊编程22 分钟前
【含文档+PPT+源码】基于spring boot的固定资产管理系统
java·spring boot·后端
roykingw23 分钟前
【终极面试集锦】如何设计微服务熔断体系?
java·微服务·面试
我命由我1234523 分钟前
Spring Cloud - Spring Cloud 微服务概述 (微服务的产生与特点、微服务的优缺点、微服务设计原则、微服务架构的核心组件)
java·运维·spring·spring cloud·微服务·架构·java-ee
それども26 分钟前
忽略Lombok构建警告
java·开发语言·jvm
用户685453759776933 分钟前
🎮 Java设计模式:从青铜到王者的代码修炼手册
java·后端
Jay丶35 分钟前
聊聊入职新公司两个月,试用期没过这件事
前端·面试