十、Vue：Vuex实现data(){}内数据多个组件间共享

最新推荐文章于 2023-07-08 11:19:47 发布
最新推荐文章于 2023-07-08 11:19:47 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： 前端 # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010132177/article/details/103744554
版权
前端 同时被 2 个专栏收录
133 篇文章 13 订阅
订阅专栏
Vue
45 篇文章 2 订阅
订阅专栏

一、概述

官方文档：https://vuex.vuejs.org/zh/installation.html

1.1vuex有什么用

Vuex：实现data(){}内数据多个组件间共享一种解决方案（类似react的redux）

1.2什么情况下使用vuex

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。
确实是如此——如果您的应用够简单，您最好不要使用 Vuex。
一个简单的 global event bus 就足够您所需了。
但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

1.3Vuex状态管理

view ->(dispatch) Action ->(Commit) Mutations ->(Mutate) State -> View

注意：Action不是必需品，如果有异步操作才可能用到Action，否则可以不使用

1.4Actions：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

二、安装及使用

官方文档：https://vuex.vuejs.org/zh/installation.html

安装方法1，npm

cnpm install vuex --save
或
npm install vuex --save

安装方法2，cdn

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

其它略过，见文档。

【使用】

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

2.1 vuex定义共享数据和引用 state:{}

应用场景： 例如在购物车中，你在商品详情页进行加减库存操作，而到购物车详情中时，用之前学得的data(){}内数据用法，你是得不到商品详情里的商品数量这个数据的，此时就引入了state:{}做为所有页面的共享数据，加减商品都可使用此处的数据，从而实现数据的共享。
代码实例
（多余代码为父子组件互传值复习）

第1步，引入vuex并创建store实例 src/main.js

[1]引入vuex
[2]使用vuex
[3]创建一个store实例（主要）
[4]所有组件共用数据存放处
[5]注入store（重要）

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' //[1]引入vuex

Vue.use(Vuex)//[2]使用vuex

//[3]创建一个store实例
const store=new Vuex.Store({
  state:{//[4]所有组件共用数据存放处
    count:10
  }
})

new Vue({
  el: '#app',
  store,//[5]注入store
  render: h => h(App)
})

第2步，引用1步所创建的共享数据count(src/components/home.vue)

【1】获取store里的共享数据方法1直接调用（this.$store.state.count）

<template>
  <div>
    <Hello :title='msg' @msg='getmsg'/><br/>
    {{msg2}}<br/>
    <!-- 【1】获取store里的共享数据方法1 -->
    home:获取vuex的store共用数据：{{this.$store.state.count}}
  </div>
</template>

<script>
import Hello from './hello.vue';

  export default{
    name:'home',
    data(){
      return{
        msg:'Home向Hello传的消息',
        msg2:''
      }
    },
    components:{Hello},
    methods:{
      getmsg(data){
        this.msg2=data;
      }
    }
  }
</script>

<style>
</style>

第2.2步，其它组件都可以引用共享数据

src/components/hello.vue
【1】写一个函数获取vuex并返回store共享数据
【2】获取vuex的store共享数据方法2(在computed内写一个获取函数，再调用)

<template>
  <div>
    <!--【2】获取vuex的store共享数据方法2 -->
    hello子组件：{{getCount}}----{{title}}<br/>
    <button @click="sendMsg">给父组件传消息</button>
  </div>
</template>

<script>
export default{
  name:'hello',
  data(){
    return{
      msg:'Hello子组件向父组件传数据'
    }
  },
  props:{
    title:{
      type:String,
      default:''
    }
  },
  computed:{
    //【1】写一个函数获取vuex并返回store共享数据
    getCount(){
      return this.$store.state.count
    }
  },
  methods:{
    sendMsg(){
      this.$emit('msg',this.msg)
    }
  }
}
</script>

<style>
</style>

效果：成功获取到在mian.js内定义的count数据值

10

2.2 修改共享数据实例 mutaitions:{}

第1步，定义修改共享数据的函数 main.js

[6]更改state里的数据在mutations里写函数操作
[6.1.0]自加函数,用于其它组件操作数据通过 this. s t o r e . c o m m i t ( ′ i n c r e m e n t ′ ) [ 6.1.1 ] 自 减 函 数 , 用 于 其 它 组 件 操 作 数 据 通 过 t h i s . store.commit('increment') [6.1.1]自减函数,用于其它组件操作数据通过 this. store.commit(′increment′)[6.1.1]自减函数,用于其它组件操作数据通过this.store.commit(‘decrement’)

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' //[1]引入vuex

Vue.use(Vuex)//[2]使用vuex

//[3]创建一个store实例
const store=new Vuex.Store({
  state:{//[4]所有组件共用数据存放处
    count:10
  },//[6]更改state里的数据在mutations里写函数操作
  mutations: {
    increment (state) {//[6.1.0]自加函数,用于其它组件操作数据通过 this.$store.commit('increment')
      state.count++
    },
    decrement(state){//[6.1.1]自减函数,用于其它组件操作数据通过 this.$store.commit('decrement')
      state.count--
    }
  }
})

new Vue({
  el: '#app',
  store,//[5]注入store
  render: h => h(App)
})

第2步，在组件中使用1步定义的修改共享数据函数 home.vue

【1】使用mutations里定义好的函数进行共享数据自加操作
【1.1】使用mutations里定义好的函数进行共享数据自减操作
【2】修改共享数据自加
【2.1】修改共享数据自减

<template>
  <div>
    <Hello :title='msg' @msg='getmsg'/><br/>
    {{msg2}}<br/>
    <!-- 获取store里的共享数据方法1 -->
    home:获取vuex的store共用数据：{{this.$store.state.count}}<br/><br/>

    <button @click='add'>加store.state里数据</button> <!-- 【2】修改共享数据自加 -->
    <button @click="sub">减</button> <!-- 【2.1】修改共享数据自减 -->

  </div>
</template>

<script>
import Hello from './hello.vue';

  export default{
    name:'home',
    data(){
      return{
        msg:'Home向Hello传的消息',
        msg2:''
      }
    },
    components:{Hello},
    methods:{
      add(){//【1】使用mutations里定义好的函数进行共享数据自加操作
        this.$store.commit('increment')
      },
      sub(){//【1.1】使用mutations里定义好的函数进行共享数据自减操作
        this.$store.commit('decrement')
      },
      getmsg(data){
        this.msg2=data;
      }
    }
  }
</script>

<style>
</style>

hello.vue 不重要

<template>
  <div>
    <!--获取vuex的store共享数据方法2 -->
    hello子组件：{{getCount}}----{{title}}<br/>
    <button @click="sendMsg">给父组件传消息</button>
  </div>
</template>

<script>
export default{
  name:'hello',
  data(){
    return{
      msg:'Hello子组件向父组件传数据'
    }
  },
  props:{
    title:{
      type:String,
      default:''
    }
  },
  computed:{
    //写一个函数获取vuex并返回store共享数据
    getCount(){
      return this.$store.state.count
    }
  },
  methods:{
    sendMsg(){
      this.$emit('msg',this.msg)
    }
  }
}
</script>

<style>
</style>

效果：点加按钮会进行共享数据自加操作，减则自减

注意：数据变更后，所有地方数据都会自动进行变更
在这里插入图片描述

2.3 actions的使用

Actions：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
mutaitions内只能执行同步操作。

src/main.js 定义actions:{}内函数

【1】用动作操作mutations里函数

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' //[1]引入vuex

Vue.use(Vuex)//[2]使用vuex

//[3]创建一个store实例
const store=new Vuex.Store({
  state:{//[4]所有组件共用数据存放处
    count:10
  },//[6]更改state里的数据在mutations里写函数操作
  mutations: {
    increment (state) {//[6.1.0]自加函数,用于其它组件操作数据通过 this.$store.commit('increment')
      state.count++
    },
    decrement(state){//[6.1.1]自减函数,用于其它组件操作数据通过 this.$store.commit('decrement')
      state.count--
    }
  },
  actions:{//【1】用动作操作mutations里函数
    increment(context){//context承上启下
      context.commit('increment');
    },
    decrement(context){
      context.commit('decrement');
    }
  }
})

new Vue({
  el: '#app',
  store,//[5]注入store
  render: h => h(App)
})

src/components/home.vue 调用actions内的函数

【1】使用main.js里actions里定义好的函数进行共享数据自加操作
【1.1】使用main.js里action里定义好的函数进行共享数据自减操作
this.$store.dispatch(‘decrement’)

<template>
  <div>
    <Hello :title='msg' @msg='getmsg'/><br/>
    {{msg2}}<br/>
    <!-- 获取store里的共享数据方法1 -->
    home:获取vuex的store共用数据：{{this.$store.state.count}}<br/><br/>

    <button @click='add'>加store.state里数据</button> <!-- 【2】修改共享数据自加 -->
    <button @click="sub">减</button> <!-- 【2.1】修改共享数据自减 -->

  </div>
</template>

<script>
import Hello from './hello.vue';

  export default{
    name:'home',
    data(){
      return{
        msg:'Home向Hello传的消息',
        msg2:''
      }
    },
    components:{Hello},
    methods:{
      add(){//【1】使用main.js里actions里定义好的函数进行共享数据自加操作
        // this.$store.commit('increment')
        this.$store.dispatch('increment')
      },
      sub(){//【1.1】使用main.js里action里定义好的函数进行共享数据自减操作
        // this.$store.commit('decrement')
        this.$store.dispatch('decrement')
      },
      getmsg(data){
        this.msg2=data;
      }
    }
  }
</script>

<style>
</style>

效果：同上，操作共享数据，1加，2减

在这里插入图片描述

2.3.1 actions内执行异步操作

src/main.js actions:{}内进行异步模拟

【异步】异步操作模拟,利用setTimeout函数延迟1秒执行自加操作

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' //[1]引入vuex

Vue.use(Vuex)//[2]使用vuex

//[3]创建一个store实例
const store=new Vuex.Store({
  state:{//[4]所有组件共用数据存放处
    count:10
  },//[6]更改state里的数据在mutations里写函数操作
  mutations: {
    increment (state) {//[6.1.0]自加函数,用于其它组件操作数据通过 this.$store.commit('increment')
      state.count++
    },
    decrement(state){//[6.1.1]自减函数,用于其它组件操作数据通过 this.$store.commit('decrement')
      state.count--
    }
  },
  actions:{
    increment(context){
      // context.commit('increment');
      setTimeout(function(){ //【异步】异步操作模拟,利用setTimeout函数延迟1秒执行自加操作
        context.commit('increment');
      },1000)
    },
    decrement(context){
      context.commit('decrement');
    }
  }
})

new Vue({
  el: '#app',
  store,//[5]注入store
  render: h => h(App)
})

src/components/home.vue

代码同上例，略过

效果同上例略过

2.4 getter:{}的使用

**应用场景：**例如在购物车中，利用2.3例的自减减少库存，当减少到0时还可以继续减为负数，此时商家将要向用户倒找钱，这样显然不合理。因此引入getter函数；

src/main.js 写 getters用于控制共享数据

【getter】用于控制共享数据的使用
如果count数据大于0则返回count,否则只返回0(小于0时只返回0)

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex' //[1]引入vuex

Vue.use(Vuex)//[2]使用vuex

//[3]创建一个store实例
const store=new Vuex.Store({
  state:{//[4]所有组件共用数据存放处
    count:10
  },
  getters:{//【getter】用于控制共享数据的使用
    controlState(state){ //如果count数据大于0则返回count,否则只返回0(小于0时只返回0)
      return state.count > 0 ? state.count : 0
    }
  },
  //[6]更改state里的数据在mutations里写函数操作
  mutations: {
    increment (state) {//[6.1.0]自加函数,用于其它组件操作数据通过 this.$store.commit('increment')
      state.count++
    },
    decrement(state){//[6.1.1]自减函数,用于其它组件操作数据通过 this.$store.commit('decrement')
      state.count--
    }
  },
  actions:{
    increment(context){
      // context.commit('increment');
      setTimeout(function(){ //异步操作模拟,利用setTimeout函数延迟1秒执行自加操作
        context.commit('increment');
      },1000)
    },
    decrement(context){
      context.commit('decrement');
    }
  }
})

new Vue({
  el: '#app',
  store,//[5]注入store
  render: h => h(App)
})

src/components/home.vue

【getters-1】通过computed写函数来获取store里的共享数据方法
【getters-2】通过computed写函数来显示store里的共享数据

<template>
  <div>
    <Hello :title='msg' @msg='getmsg'/><br/>
    {{msg2}}<br/>
    <!-- 【getters-2】通过computed写函数来显示store里的共享数据 -->
    home:获取vuex的store共用数据：{{getState}}<br/><br/>

    <button @click='add'>加store.state里数据</button> <!--修改共享数据自加 -->
    <button @click="sub">减</button> <!--修改共享数据自减 -->

  </div>
</template>

<script>
import Hello from './hello.vue';

  export default{
    name:'home',
    data(){
      return{
        msg:'Home向Hello传的消息',
        msg2:''
      }
    },
    components:{Hello},
    computed:{//【getters-1】通过computed写函数来获取store里的共享数据方法
      getState(){
        return this.$store.getters.controlState;
      }
    },
    methods:{
      add(){//使用mutations里定义好的函数进行共享数据自加操作
        // this.$store.commit('increment')
        this.$store.dispatch('increment')
      },
      sub(){//使用mutations里定义好的函数进行共享数据自减操作
        // this.$store.commit('decrement')
        this.$store.dispatch('decrement')
      },
      getmsg(data){
        this.msg2=data;
      }
    }
  }
</script>

<style>
</style>

效果：加了用getter获取数据2处最多只能减到0，没加的，3还是会返回负数

在这里插入图片描述

2.5 moudel模块操作

官方文档：https://vuex.vuejs.org/zh/guide/modules.html

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

2.6 store提取为单独文件

也可参考 router
具体步骤：

  1. 新建一个src/store文件夹
  2. 在建立一个文件/src/store/index.js
  3. 把store提取到2步建好的文件
  4. 在main.js里引入store文件

/src/store/index.js

【1】注意导出：创建一个store仓库

import Vue from "vue"
import Vuex from 'vuex'

Vue.use(Vuex)

// 【1】注意导出：创建一个store仓库
export default new Vuex.Store({
	state: {
		count: 10
	},
	mutations: {
		increment(state) {
			state.count++;
		},
		decrement(state) {
			state.count--;
		}
	},

	actions: {
		// context:承上启下
		increment(context) {
			setTimeout(function() {
				context.commit("increment");
			})
		},
		decrement(context) {
			setTimeout(function() {
				context.commit("decrement");
			})
		}
	},
	getters: {
		controlState(state) {
			return state.count > 0 ? state.count : 0
		}
	}
});

main.js

【1】全局引入store文件

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js' //【1】全局引入store文件

new Vue({
  el: '#app',
  store,//[5]注入store
  render: h => h(App)
})

效果：同上例

深蓝冰河
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex （实现任意组件之间的数据交互）
Rossbort的博客
09-19 449
<body> <div id="app"> <h1>{{name}}</h1> {{$store.state.color}} <bro1></bro1> <bro2></bro2> </div> </body> </html> <template id='bro1'> <d.
data 获取vuex_vuex 获取接口的数据
weixin_39912368的博客
12-22 1021
## 1.首先在store文件夹对应的位置加上接口，可以新建```async getFindJudgeGrade({commit}) {return this.$axios.get(`${WATCH_URL}/basicSetting/findJudgeGrade`).then((res) => {commit('SET_FIND_JUDGE_GRADE', res.data);});}``...
实现vuex与组件data之间的数据同步更新方式
10-16
今天小编就为大家分享一篇实现vuex与组件data之间的数据同步更新方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuex mapstate_Vue之数据状态管理器Vuex
weixin_39760619的博客
11-21 125
1、什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前文中我们总结了如何在父子组件中进行参数传递，实现相对简单但是开发中使用更为频繁的却是页面传参或者是无关联组件传参，这是就需要使用到Vuex数据状态管理器了2、什么情况下我应该使用 Vuex？如果您不打算开发大型单页应用，使用...
vue实例中data使用return包裹
热门推荐
pobu168的博客
06-07 2万+
vue组件变量污染
SpringMVC基础视频笔记
qq_23204557的博客
10-18 154
https://study.163.com/course/courseMain.htm?courseId=1005999006 《课时1》：在web.xml中做如下配置，用DispatcherServlet拦截一切请求： <servlet> <servlet-name>springDispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.Dis
Vue.js中使用Vuex实现组件数据共享案例
10-15
Vuex是一个专为Vue.js设计的状态管理库，它提供了一种集中式的存储机制，使得多个组件能够安全地共享和修改状态。本篇文章将深入讲解如何在Vue.js中使用Vuex来实现组件之间的数据共享。 首先，安装Vuex。在Vue CLI ...
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
10-15
通过这种方式，Vue、Vuex和axios协同工作，使得从后台获取的数据能够在多个组件之间共享。这不仅简化了组件之间的通信，还提高了代码的可维护性和可测试性。当数据发生变化时，所有依赖该数据的组件都会自动更新，...
vue之封装多个组件调用同一接口的案例
10-14
在Vue开发过程中，为了提升代码的可维护性和复用性，常常需要对多个组件共用的接口进行封装。本文将详细介绍如何在Vue中封装多个组件调用同一接口的方法，并探讨不同封装策略的优缺点。 首先，我们可以看到一个基础...
VUE组件间参数传递样例
01-17
当多个组件需要共享和同步状态时，Vuex是一个很好的选择。首先安装Vuex并创建store： ```bash npm install vuex --save ``` 创建`src/store/index.js`： ```javascript import Vue from 'vue' import ...
vuesavedata自动保存vuex中数据
08-12
vue-savedata：自动保存 vuex 中数据
vue实现将数据存入vuex中以及从vuex中取出数据
12-13
1、在store文件下面新建文件 print.js ，写入以下代码 /** * 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint(state, all) { //设置参数 sta
vuex mapstate_Vuex 映射完全指南
weixin_39967405的博客
11-21 498
//每日前端夜话第397篇//正文共：2600字//预计阅读时间：8 分钟Vuex 是一把双刃剑。如果使用得当，Vue 可以使你的工作更加轻松。如果不小心，也会使让的代码混乱不堪。在使用 Vuex 之前，应该先了解四个主要概念：state、getter、mutation 和 action。一个简单的 Vuex 状态在 store 中的这些概念中操作数据。Vuex 中的映射提供了...
Vue 组件的编写方式data(){}的含义
kelvin4587的专栏
12-13 1409
我看官方文档就是直接引用javascript方式的，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" ch...
vue面试题九：在vue中怎么一次性监听多个data中的数据
Dormiveglia-flx的博客
04-24 1508
vue中一次性监听多个data中的数据vue中一次性监听多个data中的数据 vue中一次性监听多个data中的数据 computed和watch连用，watch监听computed的属性 computed属性会在依赖变化后重新计算，如果我们在某个computed属性中依赖于我们想要监听的属性，当这些属性变化时，此computed属性也会被重新计算，然后只需监(watch)听此computed属性即可； 利用computed属性依赖变化会导致重新计算的机制可以更加优雅的实现同时监听多个属性变化的效果，而
data 获取vuex_Vuex(一) —— 集中式的状态管理仓库
weixin_33220713的博客
01-03 167
文章内容输入来源：拉勾教育大前端训练营目录Vue组件间通信方式回顾组件内的状态管理流程组件间通信方式父组件给子组件传值 (最简单的一种方式)子组件给父组件传值不相关组件之间传值其他常见方式($ref)简易的状态管理方案上面组件间通信方式的问题集中式的状态管理方案Vuex什么是Vuex?什么情况下使用Vuex?非必要的情况不要使用Vuex中大型单页应用程序使用更好Vuex核心概念回顾Vuex基本结构...
vue data声明区别 data:{} 与 data(){return {}}
weixin_42926528的博客
03-26 5430
data:{} 这种可以直接挂在vue实例上 var vm = new Vue({ el:'#app', data:{ title:'HELLO,WORLD!' } }) data(){ return{} } 组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。 不使用return包裹的数据会在项目的全局可见，会造成变量污染； 使用ret
vue共享数据---vuex state
penliyoushui的博客
05-01 535
安装 npm run vuex --save 是什么？ 怎么使用 vuex 是一个专门为vue.js应用程序开发的状态管理模式。 这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。 也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。 vuex中，有默认的五种基本的对象： state：存储状态（变量） getters：对数据获取之前的再次编译，可以理解为st...
vue中data()和data{}的区别
最新发布
关北道.
07-08 1742
使用对象方式定义数据时，如果将一个组件作为另一个组件的子组件使用时，两个组件会共享同一个data对象，这就导致如果一个组件修改data对象属性的值，另一个组件中data对象相同属性的值也会修改，这个问题就是共享数据。但是使用函数方式定义数据事，每个组件示例都会调用一次data函数，返回一个新的data对象，这就避免了数据共享问题。在vue中，data用于定义组件中所用到的数据，可以使用函数或者对象的方式来定义。
Vue的状态管理vuex使用方法详解
10-15
所以，如果有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享。比如： const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth}) const vmB = new Vue({ data: sourceOfTruth...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值