vuex从安装到使用的教程

vuex的安装

 npm install vuex --save或cnpm install vuex --save

main.js引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

vuex的目录结构和store.js的代码

store.js的代码（异步和同步的代码均留下两个方法）

import Vue from 'vue'
import Vuex from 'vuex'
import GLOBAL_CONFIG from '../config/config'
import axios from 'axios'
import BScroll from 'better-scroll'
// import BScroll from '../assets/js/iscroll'

Vue.use(Vuex)

const menu = {
  state: {
    mannumber:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,'其它'],
    activeindex: null,
    nowindex:null,
    products: {},
    GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG']
  },
  mutations: {
    get_product: function (state, products) {
        state.products = products;
        for(let i = 0; i < state.products.length; i++){
            if(state.products[i]['image'] != false && state.products[i]['image'].indexOf(state.GLOBAL_CONFIG['dataImage']) === -1){
                state.products[i]['image'] = state.GLOBAL_CONFIG['base64Header'] + state.products[i]['image'];
            }else{
                state.products[i]['image'] = require("../assets/file.png");
            }
        }
    }
  },
  actions: {

  }
}

export default new Vuex.Store({
    state: {
        mastdisplay: false,
        supervisory_control:false,
        product: {},
        countNumber:{},
        orderdetail:{},
        GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG']    
    },
    mutations: {
        mastdisplay: function (state,name) {
            if(typeof name !== 'string'){              
                if(name['name'] == 'mastdisplay' || name['name'] == 'mastspecificat' || name['name'] == 'mastflavour'){
                    if(name['product'].hasOwnProperty('specs')){
                        for(let i = 0; i < name['product']['specs'].length; i++){
                            name['product']['specs'][i]['number'] = 0;
                        }
                    }                   
                    state.product = name['product'];
                    if(name['name'] === 'mastspecificat'){
                        let specificatscroll = new BScroll('.mast-scrollspecificat',{
                            scrollY: true,
                            click: true
                        });
                    }
                    if(name['name'] === 'mastflavour'){
                        let flavouringscroll = new BScroll('.mast-flavouringscroll',{
                            scrollY: true,
                            click: true
                        });
                    }                                        
                }
                name = name['name'];            
            }
            if(state[name]){
                state[name] = false;
            }else{
                state[name] = true;
            }

        },
        countNumber: function (state,countNumber) {
            state.countNumber = countNumber;
        },
        get_orderdetail: function (state,response) {
            state.orderdetail = response;
            console.dir(state.orderdetail);
        },
        hidden_customcount: function (state) {            
            if(state.mastload){
                state.mastload = false;
            }
        }
    },
    components:{

    },
    modules: {
        menu:menu
    },
    actions: {
        get_orderdetail: function (context,company,name) {
            axios.post('/point-api-order_detail',{
                tableid:company['tableid'],
                companyid:company['companyid']
            }).then(function(response){           
                context.commit('get_orderdetail',response);
            }, function(response){
                mui.toast('网络错误');
            });
        },
        check_cart: function (context,product) {
            axios.post('/point-api-checkcart',{
                user_id:product['user_id'],
                url:context.state.GLOBAL_CONFIG['WECHAT_API_HOST']+"/wechat/app/index.php?i="+localStorage.i+"&c=entry&do=ShopCart&m=wei_scan_code"
            }).then(function(response){               
                if(response.hasOwnProperty('error')){
                    mui.toast(response['erron']);
                    return false;
                }else{
                    context.commit('set_cart',response);
                    // let menuscroll = new BScroll('.mast-cart-content-parent',{
                    //     scrollY: true,
                    //     click: true
                    // });
                } 
            }, function(response){
                mui.toast('网络错误');
            });
        }
})

mutations的使用，可以在mutations里面定义方法，里面的方法为同步操作，方法里的第一个参数是state对象，可操作state对象里定义的属性，第二个参数为传进来的参数，也可不传，在组件里可以直接操作state里的属性，例如：

this.$store.state.mastdisplay 或通过store里的方法改变this.$store.commit('mastdisplay');

actions的使用，actions里面的方法用来处理异步操作，调用异步接口后，获取到数据，对state里的属性进行重新赋值，然后在组件里计算该属性的变化

computed: {
    orderdetail: function () {
      return this.$store.state.orderdetail;
    }
    mastdisplay: function () {
      return this.$store.state.mastdisplay;
    }
    products: function () {
      return this.$store.state.menu.products;
    },
    product: function () {
      return this.$store.state.product;
    }
  }

在组件里调用actions方法

this.$store.dispatch('get_orderdetail',{
        tableid:localStorage.tableid,
        companyid:localStorage.companyid
      });

有时候我们可能会把一个组件分为一个模块，例如上面的代码，我定义了一个menu的模块，那么我需要在modules里面引入这个模块，在组件里操作该模块的属性如下：

this.$store.state.menu.products

调用该模块的mutations里的方法不需要加上menu.

关于vuex还有很多的东西没用过，大家可以自己去玩下，最好把官网看多几遍，后来再去看的时候，受益良多。