真正掌握vuex的使用方法（一）

导语：vuex是什么？我的理解就是vuex是一个管理者，管理的方式是集中式管理，管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中，希望按照我的步骤一步一步来进行练习！

咱们知道，vue项目当中的父子组件的交互是单通道传递，父组件通过props向子组件传递参数，而在子组件当中不不能直接修改接收的参数，而是需要通过自定义事件的方式，例如：

<!-------------------------------------父组件--------------------------------->
<template>
  <div>
    <a href="javascript:;" @click="show = true">点击</a>
    <t-dialog :show.sync="show"></t-dialog>
  </div>
</template>

<script>
<template>
    <div>
        {{isRed}}
        <children :isRed.sync="isRed"></children>
    </div>
</template>
<script>
    import children from "@/components/children"
    export default {
        data() {
            return {
                isRed: false//向子组件传递默认值
            }
        },
        components: {
            children
        }
    }
</script>
<!-------------------------------------子组件--------------------------------->
<template>
     <div>
         <input type="button" :class="{active:isRed}"  value="改变" @click="change">
     </div>
</template>
<script>
    export default {
        props:['isRed'],
        methods:{
            change(){
                //取反改变父组件的值
                this.$emit("update:isRed",!this.isRed);
            }
        }

    }
</script>
<style scoped>
    .active{
        background:red;
    }
</style>

这样是不是很麻烦？如果用vuex就会变的非常简单！ 
1、首先用npm包管理工具，安装vuex

//因为这个包在生产环境中也要使用，所以在这里一定要加上 –save
npm install vuex --save

2、然后在main.js当中引入vuex

import vuex from 'vuex'

3、使用vuex

Vue.use(vuex);//使用vuex
//创建一个常量对象
const state={
    isRed:false
}
var store = new vuex.Store({//创建vuex中的store对象
    state
})

4、随后在实例化Vue对象时，加入store对象：

 new Vue({
    el: '#app',
    router,
    store,//使用store
    template: '<App/>',
    components: { App }
})

5、最后再将最初的示例修改为：

<!-------------------------------------父组件--------------------------------->
<template>
    <div>
        {{$store.state.isRed}}
        <children></children>
    </div>
</template>
<script>
    import children from "@/components/children"
    export default {
        components: {
            children
        }
    }
</script>
<!-------------------------------------子组件--------------------------------->
<template>
     <div>
         <input type="button" 
                :class="{active:$store.state.isRed}"  
                value="改变"
               @click="$store.state.isRed=!$store.state.isRed">
     </div>
</template>
<script>
    export default {}   
</script>
<style scoped>
    .active{
        background:red;
    }
</style>

到目前为止，这个示例就被简化了很多？ 
前面将代码都写到了main.js中了，为了日后便于维护，更好的管理vuex，最好对vuex进行一些调整。 
1、在src文件夹根目录创建vuex文件夹，然后在该文件夹内创建store.js文件。然后在文件内引入vue和vuex。

import Vue from 'vue';
import Vuex from 'vuex';

2、然后使用Vuex

Vue.use(Vuex );//使用Vuex 
//创建一个常量对象
const state={
    isRed:false
}
//让外部引用vuex
export default new Vuex.Store({//创建vuex中的store对象
    state
})

3、然后将main.js之前写入的与vuex相关的内容清除掉，引入刚刚创建的store.js文件

import store from '@/vuex/store'

4、在实例化Vue对象时，加入引入的store对象：

 new Vue({
    el: '#app',
    router,
    store,//使用store
    template: '<App/>',
    components: { App }
})