优秀的编程知识分享平台

网站首页 > 技术文章 正文

vue中如何使用vuex的简单案列(vuex怎样使用)

nanyue 2024-09-29 15:09:12 技术文章 195 ℃

描述:

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

1.安装vuex:

npm i vuex -S;

2.



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

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

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

异步的方法声明在actions中。

页面中修改某个状态值:

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



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




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

组件1中主要代码:


组件2的主要代码:


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

3.1 使用方式1:


3.2 使用方式2:


Tags:

最近发表
标签列表