vuex用来在组件之间传值特别方便,今天就来简单说一下vuex的一些用法

1 首先 安装vuex

vuex怎么用

2 然后再src新建一个store文件夹并且新建一个js文件,这样做是为了更好管理项目

vuex怎么用

3 然后再index开始设置一些公用的值和方法。

引入vue和vuex

通过Vuex.Store可以创建一个Store对象,这个对象包含有state,mutations等熟悉,其他的先不多说。

state中的字段就是在各个组件中要使用的值。这些字段是自己添加的,此处我就设置了一个num。

mutations则是用来存放一些方法的,这些方法可以修改state中的字段值。

方法名也是自定义的,第一个参数是state,这样可以保证拿到state,从而通过state修改其中的字段值。

value则是外部传递过来的值。

这里我就设置addNum() 让state的num字段的值加上外部的传来的值。

vuex怎么用

然后要在main.js中引入这个index.js文件并且绑定到vue实例上面,这样每个实例都可以使用刚才创建的Store里面的数据。

vuex怎么用

然后定义两个组件

vuex怎么用

在cart中使用之前设置的num,使用方法如下,如果是在script中则可以用this.$store.state.num来取值

vuex怎么用

然后再add组件中调用addNum 方法,this.$store.commit里面的addNum就是表示调用,1则是传递的值,对应之前的value。

通过commit可以调用mutations中的方法来修改state中字段的值。

vuex怎么用

然后在App.vue中加载组件

vuex怎么用

在浏览器预览就可以看到效果

vuex怎么用

而点击add则会改变总数量

vuex怎么用

这样,通过vuex的这两个基本属性就可以管理组件之间的传值以及数据的改变了。

其实,只要state变了,所有使用state数据的组件的内容都会发生改变。

比如这个,我用了两次cart组件,而只要改变了state,这两个都会同时发生变化

vuex怎么用

 

 

相关文章:

  • 2021-07-23
  • 2022-12-23
  • 2021-09-19
  • 2021-09-14
  • 2021-08-15
  • 2021-08-07
  • 2022-01-10
  • 2021-04-06
猜你喜欢
  • 2021-04-01
  • 2021-11-30
  • 2021-11-01
  • 2021-06-27
  • 2021-06-17
  • 2022-12-23
相关资源
相似解决方案