Vuex API(v3.x)

本文详细介绍了Vuex的状态管理模式,包括Store构造器的选项、API、模块管理、辅助函数及其工作原理,帮助开发者更好地掌握Vuex在Vue.js应用中的实践。
摘要由CSDN通过智能技术生成

Vuex是一个专为Vue.js开发的状态管理模式,采取集中式存储管理应用的所有组件的状态,并以响应的规则保证状态以一种可预测的方式发生改变;简单的说就是全局定义可供所有组件使用的状态,以及设计了一套规则,该规则可以容易追踪到状态发生改变的轨迹;

1,Vuex API:Vuex脚本给环境提供一个名为Vuex的对象,Vuex = {Store, install, version, mapSate, mapGetters, mapMutations, mapActions, createNamespacedHelpers, createLogger }

a, Vuex.Store构造器选项:state, getters, mutations, actions, modules, plugins, strict, devtools; 

state定义组件状态;数据类型:Function | Object,若是Function,则该函数返回一个Object类型的对象;对象属性值可以是任意类型的数值如{ state: {hello: 'hello'}, isTure: 'true'};state若是个函数,在多个Store实例重用同一个module时很有帮助,相同数据但独立,互不影响;

getters定义获取状态或普通数据的getters访问函数,自动传入state作为函数参数;数据类型:Object,如{getters: {  reverseHello(state,  getters,  rootState, rootGetters){ return state.hello.split('').reverse().join('');} }};没有像setter那样会传入一个payload;

mutations定义一系列改变状态的函数,在mutation函数中直接修改state;数据类型: Object{ [key:String]: Function | Object},如{mutations: {test(state, payload){}}};或者属性值是{root: true, handler}, root表示直接用key注册mutation而不考虑namespace,这是在带命名空间的模块注册全局的mutation;

actions定义一系列改变状态的函数,只是它使用mutations而不是直接修改state; 数据类型:Object{[key]: Function | Object},如{ actions: { changeHello: function({dispatch, commit, sate, getters, rootSate, rootGetters}, payload){} }};或者属性值是{root: true, handler: fn},root表示跳过namespace,直接将action作为root(全局)的action注册;action可以是个异步函数(比如是返回Promise实例的函数或者async函数),也可以是个同步函数而mutation函数必须是同步的;(_withCommit, devtool记录mutation的前后)

modules使用唯一值key作为一个module的标志,每个module的选项就像Vuex.Store构造选项对象一样具有自己的state、getters、mutations、actions,可以有嵌套的modules,不同的是module还有个namespaced选项而且不会有自己的plugins等,某种意义上,Vuex.Store构造选项也相当于一个module的数据选项,只是Vuex.Store构造选项是相当于root module;数据类型: Object,如{[key: String]: {state, getters?, mutations?, actions?, modules?, namespaced?}};

plugins传递一系列插件Array<Function>,每一个插件是一个函数,在构造Store实例时调用,传入Vuex.Store实例作为参数;plugins的用处就是利用Store实例可以做的那些事;

devtools是个布尔值,提示是否要使用Vue的开发调试工具,若是则Vuex.Store的状态数据会出现Vue调试工具界面上以及触发vuex:mutation和vuex:action等事件;

strict 是个boolean值表示store的state的

回答: 在Vuex中,可以使用mapState辅助函数来帮助我们生成计算属性。mapState函数可以接收一个对象或一个字符串数组作为参数。如果传入一个对象,对象的键将作为计算属性的名称,值将作为计算属性的值。如果传入一个字符串数组,数组中的每个字符串将被当作计算属性的名称,并且会与state的子节点名称相匹配。\[1\]这样可以避免在组件中重复声明多个计算属性。例如,可以使用mapState来获取store中的count状态: computed: mapState({ count: state => state.count }) 或者可以使用字符串数组的方式来获取count状态: computed: mapState(\['count'\]) 在这两种方式中,count将作为计算属性的名称,并且会与state的子节点名称相匹配。\[2\]这样就可以在组件中直接使用this.count来获取count状态的值。同时,mapState函数返回的是一个对象,该对象包含了计算属性的定义。\[1\]所以在computed选项中,可以直接将mapState函数的返回值赋值给computed属性。\[2\]这样就可以在组件中使用计算属性来获取store中的状态值。 #### 引用[.reference_title] - *1* *2* [Vuex中的 mapState](https://blog.csdn.net/m0_64707449/article/details/127495971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vuex中mapState](https://blog.csdn.net/qq_54250695/article/details/123938509)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值