js中怎么获取某个属性的值_vue中如何使用vuex的简单案列

描述:

vue项目如果不涉及到很多需要进行状态管理的值,其实可以不用使用vuex,对于多个组件多个页面要求某个状态值同步更新的话就可以使用vuex,下边是快速使用vuex进行状态值管理的demo。

1.安装vuex:

npm i vuex -S;

2.

d0db771956e422744dd55a3a76b6eac4.png

main.js中引入store

0f9d4ee2a08c1d25956261d229b3526a.png

src目录下创建store目录并创建index.js文件

import vue实例和vuex实例,并在当前vue实例中使用vuex,声明store对象,

state对象里边存放的是需要进行状态管理的属性。

同步的方法声明在mutations中,我们是通过在mutations对象里边的声明的方法来对state里边属性的属性值进行更改。

异步的方法声明在actions中。

页面中修改某个状态值:

2.1. 使用 this.$store.dispatch('editfun',"secondsName"),触发actions里边的方法editfun,第二个参数 是传递过来的值。

963cd66d07a16a59763b2ff3165ae841.png

2.2.actions里边的editfun方法中使用content.commit触发mutations中的edit方法,并将后边的参数传递 给mutations中的对应的方法的形参n

31da4a325b3dc01e64a893b33bb10f05.png
e5a59ffbf2333b17deb1cc7af664c255.png

Vuex.Store中的S要大写,否则会报错

bb1d18000a69163e893e6a7f885c6b15.png

最初的页面展示

我们在组件1中触发了方法,更新了name的值,组件2中的name值同时更新

3e45b98452bbba6b4c76ff53f1b2de51.png

组件1中主要代码:

10b87ae56871f9c3074bf807ecf30f0e.png
b548c7bf2d323bda5eaaac3a0d0f7a21.png

组件2的主要代码:

24b26b46c473f3958b163022fc12893f.png

3.组件中使用store中的属性

3.1 使用方式1:

1f2fa81ed9911b2a7af781eb7fbdcd32.png

在组件中使用store对象里边的name属性

3.2 使用方式2:

2daa0c706deda9d2fbd7ef71e3374cb3.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值