vuex在vue-cli中的使用简介

安装 vuex :  npm install vuex --save

1.在新建的vue-cli项目中,新建两个组件a,b,实现的功能是通过b.vue里的按钮增减a.vue里的数据。

vuex在vue-cli中的使用简介_第1张图片

2.安装vuex,并在src文件夹下新建store文件夹,在store文件下新建index.js文件。

vuex在vue-cli中的使用简介_第2张图片


2.在main.js引用需要使用的组件并将vuex注入根实例:


vuex在vue-cli中的使用简介_第3张图片

3.在store的index.js里引入vue和vuex并写入公共使用的数据和方法:

vuex在vue-cli中的使用简介_第4张图片
这里建项目时下载了语法检测的什么鬼,总是出现红色下划线,其实并没错

4.在a.vue里引入store,并在计算属性添加方法,获取state的公共数据count赋值给a.vue的count:

vuex在vue-cli中的使用简介_第5张图片

5.在b.vue里使用mutations的公共方法,增减a.vue里的count:

vuex在vue-cli中的使用简介_第6张图片
此时就可以通过b.vue的按钮,增减a.vue的数据啦


vuex在vue-cli中的使用简介_第7张图片
一点皮毛,还得继续研究啊

你可能感兴趣的:(vuex在vue-cli中的使用简介)