如何在vuex中直接赋值
本篇文章为大家展示了如何在vuex中直接赋值,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联主要从事成都网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务旌阳,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
第一种方法 通过computed的计算属性直接赋值
1.store.js(vuex的代码如下):
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state={//状态对象 num:1, } const mutations={//触发状态 jia(state){ state.num++; },//做加法 jian(state){ state.num--; },//做减法 } export default new Vuex.Store({ state, mutations, })
2.你自己组件a.vue代码如下:
{{msg}}
{{$store.state.num}}-{{num}}
注意:计算属性写法一定不要忘了给num()与上面的模板要同名
第二种方法 通过mapState的对象来赋值
这种方法更为简单
第一步 a.vue引入mapState
import {mapState} from 'vuex'
第二步将上面的计算属性改成下面这种写法即可
computed:mapState({num:state=>state.num}),即可
第三种方法通过mapState的数组来赋值
代码如下所示:
把上面的计算属性直接改成下面这种形式
computed:mapState(["num"])
注:记得加上import {mapState} from 'vuex'
上述内容就是如何在vuex中直接赋值,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
网站栏目:如何在vuex中直接赋值
本文路径:http://myzitong.com/article/gsgghc.html