理解Vuex【Vue】

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量529 收藏
点赞数
文章标签： vue.js javascript 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53943447/article/details/130042619
版权

5. vuex

5.1 理解vuex

5.1.1 vuex是什么

  1. 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
  2. Github 地址: https://github.com/vuejs/vuex

5.1.2 什么时候使用 Vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

5.1.3 案例

效果：
在这里插入图片描述
代码：
Count.vue组件

<template>
    <div>
        <h1>当前求和为：{{ $store.state.sum }}</h1>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="incremnt">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>

<script>
    export default {
        name: 'Count',
        data(){
            return {
                n: 1, //用户选择的数据
            }
        },
        methods: {
            incremnt(){
                this.$store.commit('JIA', this.n)
            },
            decrement(){
                this.$store.commit('JIAN', this.n)
            },
            incrementOdd(){
                
                this.$store.dispatch('jiaOdd', this.n)
                
            },
            incrementWait(){
                
                this.$store.dispatch('jiaWait', this.n)
                
            },
        },
        mounted(){
            console.log('Count', this);
        }
    }
</script>

<style scoped>
    button {
        margin-left: 5px;
    }
</style>

store/index.js

//该文件用于创建vuex中最为核心的 store
import { setTimeout } from 'core-js';
import Vue from 'vue' 
//引入vuex
import Vuex from 'vuex'
//准备actions ---- 用于响应组件中的动作
const actions = {
    /* jia(context, value){
        console.log('actions中的jia被调用了');
        context.commit('JIA', value)
    },
    jian(context, value){
        console.log('actions中的jian被调用了');
        context.commit('JIAN', value)
    }, */
    jiaOdd(context, value){
        console.log('actions中的jiaOdd被调用了');
        if(context.state.sum % 2){
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value){
        console.log('actions中的jiaWait被调用了');
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },

}
// 准备mutations ---- 用于操作数据（state）
const mutations = {
    JIA(state, value){
        console.log('mutations中的JIA被调用了');
        state.sum += value
    },
    JIAN(state, value){
        console.log('mutations中的JIAN被调用了');
        state.sum -= value
    },
}
// 准备state ---- 用于存储数据
const state = {
    sum: 0, //当前的和
}

//应用vuex插件
Vue.use(Vuex)

//创建store并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

App.vue

<template>
  	<div>
		<Count></Count>
  	</div>
</template>

<script>
	import Count from './components/Count.vue'
	export default {
		name:'App',
  		components: { Count },
		  
	}
</script>

5.2 Vuex 工作原理图

在这里插入图片描述
说明：

  • state：
  1. vuex 管理的状态对象
  2. 它应该是唯一的
  3. 示例代码：
const state = {
	xxx: initValue
}
  • actions:
  1. 值为一个对象，包含多个响应用户动作的回调函数
  2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state
  3. 如何触发 actions 中的回调？
    在组件中使用: $store.dispatch('对应的 action 回调名') 触发
  4. 可以包含异步代码（定时器, ajax 等等）
  5. 示例代码：
const actions = {
	zzz ({commit, state}, data1) {
		commit('yyy', {data1})
}
  • mutations
  1. 值是一个对象，包含多个直接更新 state 的方法
  2. 谁能调用 mutations 中的方法？如何调用？
    在 action 中使用：commit('对应的 mutations 方法名') 触发
  3. mutations 中方法的特点：不能写异步代码、只能单纯的操作 state
  4. 示例代码：
const mutations = {
	yyy (state, {data1}){
		//更新state的某个属性
	}
}

注意：Actions、Mutations、State这三个都是对象；都要经过 store 的领导

5.3 搭建vuex环境

安装vuex：npm install vuex@3
注意：vue2使用vuex3版本；vue3使用vuex4版本。

  1. 创建文件：src/store/index.js
//该文件用于创建vuex中最为核心的 store
import Vue from 'vue' 
//引入vuex
import Vuex from 'vuex'
//准备actions ---- 用于响应组件中的动作
const actions = {}
// 准备mutations ---- 用于操作数据（state）
const mutations = {}
// 准备state ---- 用于存储数据
const state = {}

//应用vuex插件
Vue.use(Vuex)

//创建store并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})
  1. 在main.js中创建vm时传入store配置项
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store/index'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

5.4 基本使用

  1. 初始化数据、配置actions、配置mutations、操作文件store.js
//该文件用于创建vuex中最为核心的 store
import { setTimeout } from 'core-js';
import Vue from 'vue' 
//引入vuex
import Vuex from 'vuex'
//准备actions ---- 用于响应组件中的动作
const actions = {
    /* jia(context, value){
        console.log('actions中的jia被调用了');
        context.commit('JIA', value)
    },
    jian(context, value){
        console.log('actions中的jian被调用了');
        context.commit('JIAN', value)
    }, */
    jiaOdd(context, value){
        console.log('actions中的jiaOdd被调用了');
        if(context.state.sum % 2){
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value){
        console.log('actions中的jiaWait被调用了');
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    },

}
// 准备mutations ---- 用于操作数据（state）
const mutations = {
    JIA(state, value){
        console.log('mutations中的JIA被调用了');
        state.sum += value
    },
    JIAN(state, value){
        console.log('mutations中的JIAN被调用了');
        state.sum -= value
    },
}
// 准备state ---- 用于存储数据
const state = {
    sum: 0, //当前的和
}

//应用vuex插件
Vue.use(Vuex)

//创建store并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})
  1. 组件中读取vuex中的数据：$store.state.sum
  2. 组件中修改vuex中的数据：$ store.dispatch('action中的方法名'，数据)或$store.commit('mutations中的方法名'，数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5.5 getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
  2. 在 store.js 中追加 getters 配置
......
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}
//创建并暴露store
export default new Vue.Store({
	......
	getters
})
  1. 组件中读取数据：$store.getters.bigSum

5.6 四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性
computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },
  1. mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },
  1. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }
  1. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含 $store.commit(xxx)的函数
methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（对象形式）
       ...mapMutations(['JIA','JIAN']),
   }

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

5.7 模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。
  2. 修改 store.js
 const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })
  1. 开启命名空间后，组件中读取state数据：
//方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),
  1. 开启命名空间后，组件中读取getters数据：
//方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])
  1. 开启命名空间后，组件中调用dispatch：
//方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  1. 开启命名空间后，组件中调用commit：
//方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

效果：
在这里插入图片描述

源代码如下：
Count.vue组件

<template>
    <div>
        <h1>当前求和为：{{ sum }}</h1>
        <h3>当前求和放大10倍为: {{ bigSum }}</h3>
        <h3>我在{{ school }}, 学习{{ subject }}</h3>
        <h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">当前和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button>
    </div>
</template>

<script>
    import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
    export default {
        name: 'Count',
        data(){
            return {
                n: 1, //用户选择的数据
            }
        },
        computed: {
            //借助mapState生成计算属性，从state中读取数据。（数组写法）
            ...mapState('countAbout', ['sum', 'school', 'subject']),
            ...mapState('personAbout', ['personList']),
            //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
            ...mapGetters('countAbout', ['bigSum'])
        },
        methods: {
            //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
            ...mapMutations('countAbout', {increment: 'JIA', decrement: 'JIAN'}),
            //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
            ...mapActions('countAbout', {incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'}),
        },
        mounted(){
            // console.log('Count', this.$store);
            const x = mapState({sum:'sum', school: 'school', subject: 'subject'})
            console.log(x);
        }
    }
</script>

<style scoped>
    button {
        margin-left: 5px;
    }
</style>

Person.vue组件

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: blue">Count组件求和为: {{ sum }}</h3>
    <h3>列表中第一个人的名字是：{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    // import {mapState} from 'vuex'
    export default {
        name: 'Person',
        data() {
            return {
                name: ''
            }
        },
        computed: {
            personList(){
                return this.$store.state.personAbout.personList
            },
            sum(){
                return this.$store.state.countAbout.sum
            },
            // ...mapState(['personList'])
            firstPersonName(){
                return this.$store.getters['personAbout/firstPersonName']
            }
        },
        methods: {
            add(){
                const personObj = {id: nanoid(), name: this.name}
                this.$store.commit('personAbout/ADD_PERSON', personObj)
                this.name = ''
            },
            addWang(){
                const personObj = {id: nanoid(), name: this.name}
                this.$store.dispatch('personAbout/addPersonWang', personObj)
                this.name = ''
            },
            addPersonServer(){
                this.$store.dispatch('personAbout/addPersonServer')
            }
        },
    }
</script>

store/index.js

//该文件用于创建vuex中最为核心的 store
import { setTimeout } from 'core-js';
import Vue from 'vue' 
//引入vuex
import Vuex from 'vuex'

//求和相关的配置
const countOptions = {
    namespaced: true,
    actions: {
        jiaOdd(context, value){
            console.log('actions中的jiaOdd被调用了');
            if(context.state.sum % 2){
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value){
            console.log('actions中的jiaWait被调用了');
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value){
            console.log('mutations中的JIA被调用了');
            state.sum += value
        },
        JIAN(state, value){
            console.log('mutations中的JIAN被调用了');
            state.sum -= value
        },
    },
    state: {
        sum: 0, //当前的和
        school: '西安文理',
        subject: '前端',
    },
    getters: {
        bigSum(state){
            return state.sum * 10
        }
    },
}

//人员相关的配置
import axios from 'axios'
const personOptions = {
    namespaced: true,
    actions: {
        addPersonWang(context, value){
            if(value.name.indexOf('王') === 0){
                context.commit('ADD_PERSON', value)
            }else{
                alert('添加的人必须姓王！')
            }
        },
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', {id:nanoid(), name:response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value){
            console.log('mutations中的ADD_PERSON被调用了');
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            {id: '001', name: '张三'}
        ]
    },
    getters: {
        firstPersonName(state){
            return state.personList[0].name
        }
    },
}
//应用vuex插件
Vue.use(Vuex)
//创建store并导出store
export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})

App.vue

<template>
  	<div>
		<Count></Count>
		<hr>
		<Person></Person>
  	</div>
</template>

<script>
	import Count from './components/Count.vue'
	import Person from './components/Person.vue'
	export default {
		name:'App',
  		components: { Count, Person },
	}
</script>
赖皮.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue–vuex详解
12-08
官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解：Vuex是用来管理组件之间通信的一个插件 ...
深入理解基于vue-cli的vuex配置
08-29
本篇文章主要介绍了基于vue-cli的vuex配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue之Vuex
qq_65975514的博客
05-15 7853
理论： 1. vue中各个组件之间传值 1.父子组件 父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...); 2.非父子组件或父子组件 通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...) 3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估...
Vue2.x - Vuex
伏城之外的博客
06-11 1833
Vuex学习总结
Vue3中Vuex的使用
热门推荐
雨落宿命敲的博客
03-13 5万+
Vuex是做什么的？ Vue：状态管理工具 状态管理是什么? 需要在多个组件中共享的状态、且是响应式的、一个变，全都改变。 例如一些全局要用的的状态信息：用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我们就需要这么一个工具来进行全局的状态管理，Vuex就是这样的一个工具。 单页面的状态管理 View–>Actions—>State 视图层(view)触发操作(action)更改状态(state)响应回视图层(view) vuex（Vue3.2版本） store/index.j
Vue3之Vuex
m0_52744273的博客
04-04 4493
vuex的基本使用，vuex的模块化，vuex的进阶
vue2+vuex的使用
m0_61472704的博客
03-30 3744
一、vuex是干什么的？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
Vue、Vuex小总结
weixin_41950078的博客
02-17 1241
目录 1.0 Vue 1.1 vue的原理 1.2 vue的生命周期 2.0 Vuex 2.1 vuex的核心内容 2.2 vuex的工作流程图 2.3规范目录结构 3.0 Vue-router 1.0 Vue 1.1 vue双向绑定原理 参考： 【Vue系列】深入探究vue框架的双向绑定底层原理_小柒很爱喵的博客-CSDN博客 Vue2.0与Vue3.0双向绑定的比较_小柒很爱喵的博客-CSDN博客 1.2 vue的生命周期 每个 Vue 实例在被创建时都要经过一系列的初
Vue系列：实例理解Vuex
Mr_chen的博客
05-06 625
当我们在项目中使用props来处理数据共享关系时，多层级的组件之间数据传递真的是很繁琐，费劲且不易维护，vuex的出现，就可以完美帮我们解决这个问题。
Vue2中使用Vuex
weixin_44685106的博客
04-30 413
在App.js中,通过 $store.commit() 将方法回调名,以及数据,直接传给mutations对象,在mutations对象中写方法回调,将数据进行处理使用。由于已经引入Vuex,所以在this中会有$store方法, store方法中存在 commit,dispatch,getters,state等属性具体属性见下图。并且在其中进行逻辑运算,然后再通过 context.commit('大写方法名区别actions中的方法',value)方法名(context,value){
如何在Vue3使用Vuex
m0_59642018的博客
11-09 1853
vuex
Vue3中Vuex的基本使用
qq_45438471的博客
04-21 1272
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex适用于中大型单页应用程序，可以方便地管理应用程序状态，实现状态共享和状态变更的响应式更新，使得代码更加清晰简洁。通常 Vuex用于存储用户登录状态、用户个人信息、全局加载状态、页面公用数据等数据。 故本篇主要简单介绍Vuex的基本配置和使用。
详解vue组件化开发-vuex状态管理库
11-26
Vuex 是一个专为 Vue.js ...这里就不再细讲vuex的各个用法，写这篇博客的目的只是帮助部分同学更快地理解并上手vuex。 为什么要用vuex 不知道现在读这篇博客的同学是否有看过Vue2.0子父组件之间通信，子父组件之间的
理解vuex的状态管理模式架构
01-27
vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证以一种可预测的方式发生变化。 使用方式有如下2种： 1.如果直接在浏览器下引用包的话；如下： 接...
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
weixin_58540586的博客
05-17 1191
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 678
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 165
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1128
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 760
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
vue3中vuex怎么理解
07-28
在Vue 3中，Vuex的理解可以分为以下几个方面： 1. 状态（State）：Vuex中的状态指的是应用程序的数据。它存储在一个单一的源（即store）中，并且可以被应用程序的所有组件共享和访问。 2. 动作（Actions）：动作是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值