vue笔记（五）------初识vuex

一、安装

       1 直接引入

            vuex下载

       2 npm安装

           (1) 命令：npm install vuex --save

          (2) 在项目中引入 (可以新建一个文件夹专门放vuex的相关文件)

                import vue from 'vue'

                import vuex from 'vuex'

          (3) 引入之后使用vue.use(vuex)进行引用

二、入门

          1 初始化 vuex

       2 取值 $store.state.count

       3 页面打印出0

       4 恭喜你，入门成功。

三、将访问状态对象(state)的值赋值给模板中的data

      在入门时我们写了state,这个就是我们说的访问状态对象。这个就是我们的共享值。

      1 通过computed的计算属性直接赋值

           原因：每当store.state.count更改时，它将导致计算属性重新评估，并触发相                                          关的DOM更新。

       2  使用mapState进行赋值（mapState可以接收对象也可以接收数组）

             首先要用import引入mapState

             import {mapState} from 'vuex'

这里接收的是数组，页面输出了store.state.count和store.state.col的值

这里接收的对象

四、getters 计算过滤

       getters可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。

   1    (1)  声明getters属性

       (2) 在模板中取值

页面输出112

       (3) 也可以在模板中 {{store.getters.name}}直接取值

      2   通过 mapGetters简化写法

             使用mapGetters的第一步也是引入mapGetters

              注意：在vue的构造器里边只能有一个computed属性，所以这里使用了es6                                             的...运算符

这里配置了多个computed属性，只会显示出最后一个computed的值

五、Mutations更改状态（必须是同步的）

         Vuex Mutations与事件非常相似：每个Mutations都有一个字符串类型和一个                         处理程序。

        1 声明Mutations

       2  修改状态 store.commit('increment')

      3 传值

      3.1  直接传值

这样就实现每次加10

    3.2 通过对象进行传值

这样也可以实现每次加10的效果

六、actions修改状态（异步）

        actions和Mutations都是修改状态的。不同的是actions是异步的。Mutations是同步的

        用法见Mutation

七、module模块组

        由于使用单个state树，我们的应用程序的所有state都包含在一个大对象中。然而，随着我们的应用程序规模扩大，store可能变得非常臃肿。所以就引入了module。

       每个module都可以包含自己的state，Mutation，actions，getters

      1 使用