vueX的使用

大家在做vue的项目中一定遇到了父子组件传参的问题吧，那么一次两次还行，但如果有好多个组件和很多数据的时候大家有没有为此感到头大呢 ^_^  没有关系 现在就让我带大家解决这个问题  在vue当中呢有一个专门管理数据的一个仓库 没错  就是我所说的vuex了 请看代码↓↓↓↓↓↓↓↓↓↓↓↓

第一步：下载cnpm install vuex--save

第二步：在src目录下创建store目录，在store目录中创建三个文件

①state.js：                             //保存数据状态

let state={

       count:0,

       goodsList:[]

   }

   export default state;

②mutations.js:                              //写一下操作数据状态的方法

 import state from './state.js'//导入数据状态state

  export default{

      increment(state,num){//increment加方法

             state.count+=num;

          },

      reduce(state,num){//reduce减方法
 
            state.count-=num;

         },

      addgoods(state,obj){//添加数组的方法

            state.goodsList.push(obj)

        }

 }

③getters.js:相当于computed计算属性，把需要在页面显示的数据配置一下

export default{

            count:(state)=>{

            return state.count;

        }

    }

④index.js:把state文件、mutations文件、getters文件集合到一起方便导出

        import state from './state';

        import mutations from './mutations'

        import getters from './getters'

        export default{

           state,

           mutations,

           getters

   }

第三步：在min.js中配置

 import  Vuex  from  'vuex';

 Vue.use(Vuex);

 import storeObj from '@/store/index'//导出引入全局vueX

 let store=new Vuex.Store(storeObj);//使用

new Vue({

        el:'#app',

        router,

        store,//在new Vue中注册全局使用

})

第四步：创建vue组件

   比如：com11.vue组件

<button @click='red()'>减少3</button>

import{                     //先引入vuex 中mutations方法

    mapMutations

}  from 'vuex'

     export default {

         name:"com11",

         methods:{

            ...mapMutations([

                'reduce'//使用vuemutations中的减法方法

            ]),

                red(){//减法方法

                   this.reduce(3)

                   }

          }

}

   比如：com22.vue组件（显示count）

 import {

     mapGetters

  }from 'vuex'

  export default {

       name:"com33",

       computed:{

           ...mapGetters([

                'count'

          ])

     }

}