vuex怎么学（一）

初学Vuex我想吐血,但是坚持下来，我还是入门了。。。

先来说说我现在的感受吧：

一个字： “草”
两个字： “草蛋”
三个字： “草尼玛”
一句话： “心中一万只草泥马奔腾而过。。。”
言归正传，学了 vue 基本语法，又学了 vue-router 这些好像都不难，但是vuex官方文档读了好几遍，还是不懂啥意思～～，官方给的示例也是没头没脑的，看不太懂，造成很多童鞋跟我一样，一度想放弃学习vuex，因为没有vuex也能写出来简单的项目。但是，宝强哥说过：不抛弃，不放弃。不能因为难而抛弃vuex，不能因为学不会而放弃，这些都是暂时的…[此处省略2048字…]，话说回来，看官方文档学不会，不看官方文档更不可能学的会，所以，向下看 —>

先照着中文官网撸一遍：

1. 安装以前的这部分我就不说了。

2. “vuex是什么” —–> 状态管理模式(记着有这么个词就行了，我开始也不懂)

       // 官方代码：    new Vue({        // state        data () {            return {                count: 0            }        },        // view        template: `            <div>{{ count }}</div>        `,        // actions        methods: {            increment () {                this.count++            }        }    })

   这些都是浮云，我表示乱糟糟的，刚接触我也看不懂,只知道下面这几个概念字面意思

   • state，驱动应用的数据源；
   • view，以声明方式将state映射到视图；
   • actions，响应在view上的用户输入导致的状态变化。
   • 配的图还是贴过来吧，虽然看不懂，但是要有印象
     
     

3. 知道上面三个概念就可以继续往下撸了 —–> “开始”进入vuex到世界

   • 先创建一个webpack项目：在命令行输入vue init webpack vuexdemo ,安装依赖和vuex

   • 在main.js中引入 vuex

         import Vuex from 'vuex';    Vue.use(Vuex);

   • 来写个最简单的vuex状态管理

         const store = new Vuex.Store({        state: {            count: 0        },        mutations: {            increment: state => state.count++,            decrement: state => state.count--        }    })    // 在下面调用并改变状态试试    store.commit('increment')    console.log(store.state.count)      // 打印结果为 1 (注意放在vue实例对象前面)

   • 这样虽然完成了最简单的状态管理，但是不实用哇～～，这个也算不得vuex的状态管理呢

4. 一步步来，首先来看看 “单一状态树” — state

   • 还是上面那个例子(我不会跟官网那样跳来跳去，我就用一个例子让你一点点证明白vuex是什么)，现在这样写：

       // main.js     const store = new Vuex.Store({        state: {            count: 0        },        mutations: {            increment: state => state.count++,            decrement: state => state.count--        }    })    new Vue({        el: '#app',        router,        store,      // 将 store 在vue实例中申明并全局化，这样在其他组件中可以用 this.$store 调用         render: (h) => h(App)    })    // 组件 vuex1.vue (新建组件是要配置对应的路由的，否则是看不到组件效果的，这个这里不再赘述)    <template>        <div id="apd">            <p>vuex1 -- {{ count }}</p>            <p>                <button @click="increment">+</button>                <button @click="decrement">-</button>            </p>        </div>    </template>    <script>        console.log(this.$state);        export default({            computed: {                count() {                    return this.$store.state.count                }            },            methods: {                increment() {                          this.$store.commit('increment')                    console.log(this.$store.state.count);                },                decrement() {                    this.$store.commit('decrement')                }            }        })    </script>

   • 这里我只说说我是怎么思考的
     
     1. 前面不是将store在vue实例中实例化了么，那么先在组件的script中打印下this.$store看看能不能调出来,并在控制台查看store的数据结构
     2. 在computed中获取state里保存的count，并返回给这个组件中的count(这里只是用同名的count来接收，你可以试试用不同的名字接收count)
     3. 至于这里的commit，仔细看store的数据结构的童鞋，可能会注意到里面有commit：function(){}的定义，这东西是胎带动方法，就这么用，记住就好。
     4. 一切准备好了就去页面试试吧。
   • 到这里，我想你对state是否有点理解了，他就是保存可在其他组件中使用的变量的
5. 上面提到了mutation(释义：变化)，这玩意儿开始就有，在这里我想给你解释下，state只能保存变量，自己没能力对变量操作，执行操作的是mutation，上面的加和减都是定义在mutations中的。事实上，vuex就是用mutation来动态操作state的。
   
   • mutation构成： 字符事件名称 + 回调函数
   • matation使用： store.commit(‘事件名’)
   • matation只能使用同步函数回调，异步回调需要有actions

6. 到此我想你已经对这个vuex有点基础的了解了吧，我们在按照这个顺序展开联想，vuex是可以在兄弟组件中传递数据的，这个怎么做到的，把我们的示例改一下：

       // vuex2.vue    <template>        <div>            {{ num }} -- <router-link to="/vuex1">切换到视图1</router-link>        </div>    </template>    <script>        export default{            computed:{                num(){                    return this.$store.state.count                }            }        }    </script>

   运行一下,切换到vuex1的视图，随意加减，然后再切回来，可以看到我们vuex2视图中始终显示的是vuex1视图最终保存的结果

7. 最后一部，我们来对vuex的写法美化一下，main.js中方太多东西乱七八糟的总不好(原谅我的强迫症)

   • 新建vuex文件夹，内建 store.js 、state.js 和 mutations.js 文件
   • 我们先把store放到store.js文件中去

       import Vue from 'vue'    import Vuex from 'vuex'    Vue.use(Vuex)    const state = {        count: 0    }    const mutations = {        increment: state => state.count++,        decrement: state => state.count--    }    export default new Vuex.Store({        state，        mutations    })

   *注意此处*export default 是暴露模块的语法，大括号内是es6中json的简写，意为：state:state,mutations:mutations
   这样在main.js中只需要引入store.js(模块用import … from … 引入) 并在vue实例中申明即可，此处不需要再重复引入vuex了。

8. 写程序要能举一反三，我们简化了main.js， store.js是否也可以简化呢？，是的：

       // state.js     const state = {        count: 0    }    export default{        state    }    // mutations.js    const mutations = {        increment: state => state.count++,        decrement: state => state.count--    }    export default{        mutations    }    // store.js    import Vue from 'vue'    import Vuex from 'vuex'    import state from './state'    import mutations from './mutation'    Vue.use(Vuex)    export default new Vuex.Store({        state:state.state,        mutations:mutations.mutations    })

   注意此处我们引入的是state这个模块对象，而不是对象中的用来存储变量的state，所以需要使用state.state来正确引入状态。

至此，我们已经了解并配置好了一个简单的vuex项目了，这样的文件配置能很大程度的是我们的项目结构清晰化，方便以后的数据量很大时的维护问题，action部分的解读，下期继续…希望看了这篇笔记的你能掌握这种简单的方法，并且学得比我快@_@～