Vuex简单实用
1. vue-cli(3.0)脚手架初始化Vue项目
2. 下载安装vuex: npm install vuex
3. 在初始化的项目的main.js里面引入vuex,并声明使用了vuex
【注意】template:’<App/>’ 意思就是用App.vue去渲染根路径下的index.html!不需要你用render函数去渲染,或是在页面里面写组件名的形式了(<App></App>)!
5. 简单的计数器Demo
*组件调取state里面的数据
(1)直接在main.js里面创建对象:
(2)把store对象挂载在Vue对象里面:
(3)组件里面引入State对象里面的数据
(4)插值表达式的形式引入数据
*组件改变state里面的数据
【注意】上面的第四步通过this.$store.commit(‘increment’)方式触发mutation,从而改变state里面的数据!除了这种方式之外,还有一种方式:this.increment()
5. Actions
(1)main.js的store对象里面,在actions里面添加方法
(2) HelloWorld.vue里面引入action
【注意】this.myIncrease(); 触发action里面的方法,action的方法去调用mutation,从而改变state对象里面的数据! 除了上面触发action的方法之外,可以通过this.$store.dispatch(‘myIncrease’)的方式触发action,而且组件里面不需要上面的1、2步骤!
6. 参数的传递
* main.js里面的mutations
* action向mutation传参数
当然action也可以接受参数
7. Getters
一般的项目级的开发,我们会单独创建一个store文件夹,在里面写vuex相关的内容