此文章大部分基于使用webpack脚手架
一、Vuex的安装
在编辑器里的脚手架根目录上打开终端,或者用cmd直接cd到根目录,输入npm install vuex –save 进行下载
二、Vuex的创建
1、在src目录下新建store文件夹,在文件夹中新建index.js文件(名字起做index在引入路径时可以少写一步)
以下为在index.js中定义的内容:
2、在main.js中的vue根实例上注册store(要记得先把之前写的store的js文件先引进来)
3、在需要使用数据的组件模板中完成调用,需要使用到根实例也就是this.$store,上的数据或getter方法,以下面的方法使用
三、vuex 根实例上的属性(配置项)名称都不可更改
state 在这个区域定义数据
getters 在这里定义属性,可以获取到store的数据,也可以在这里对store里的数据进行操作,不更改原数据,他的使用方式类似计算属性,当作一个属性去调用
getters 调用方式
muations 在这里定义方法,这里的方法可以改变原数据
使用方式
①在需要使用数据的组件模板上定义触发事件
②.再在当前组件的逻辑里定义方法,在这个方法里使用this.$store.commit的方法给他传递一个参数(自定义名称)
③以传递过来的参数为准,在mutations里面以此参数定义一个函数方法,这里的return可以是以下类似方式,也可以是一个函数(当需要在触发事件,传递参数时,return的可以是一个函数,以当前示例为例,传递方式是在click绑定的事件后加一个括号,括号传参)