Vuex简单使用

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相关的内容