vuex用来在组件之间传值特别方便,今天就来简单说一下vuex的一些用法
1 首先 安装vuex
2 然后再src新建一个store文件夹并且新建一个js文件,这样做是为了更好管理项目
3 然后再index开始设置一些公用的值和方法。
引入vue和vuex
通过Vuex.Store可以创建一个Store对象,这个对象包含有state,mutations等熟悉,其他的先不多说。
state中的字段就是在各个组件中要使用的值。这些字段是自己添加的,此处我就设置了一个num。
mutations则是用来存放一些方法的,这些方法可以修改state中的字段值。
方法名也是自定义的,第一个参数是state,这样可以保证拿到state,从而通过state修改其中的字段值。
value则是外部传递过来的值。
这里我就设置addNum() 让state的num字段的值加上外部的传来的值。
然后要在main.js中引入这个index.js文件并且绑定到vue实例上面,这样每个实例都可以使用刚才创建的Store里面的数据。
然后定义两个组件
在cart中使用之前设置的num,使用方法如下,如果是在script中则可以用this.$store.state.num来取值
然后再add组件中调用addNum 方法,this.$store.commit里面的addNum就是表示调用,1则是传递的值,对应之前的value。
通过commit可以调用mutations中的方法来修改state中字段的值。
然后在App.vue中加载组件
在浏览器预览就可以看到效果
而点击add则会改变总数量
这样,通过vuex的这两个基本属性就可以管理组件之间的传值以及数据的改变了。
其实,只要state变了,所有使用state数据的组件的内容都会发生改变。
比如这个,我用了两次cart组件,而只要改变了state,这两个都会同时发生变化