vuex从安装到使用的教程

vuex的安装

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

 
 


  
  
1
 
 

main.js引入vuex

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

Vue.use(Vuex)

 
 


  
  
1

  
  
2

  
  
3

  
  
4

  
  
5
 
 

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('网络错误');
            });
        }
})

 
 


  
  
1

  
  
2

  
  
3

  
  
4

  
  
5

  
  
6

  
  
7

  
  
8

  
  
9

  
  
10

  
  
11

  
  
12

  
  
13

  
  
14

  
  
15

  
  
16

  
  
17

  
  
18

  
  
19

  
  
20

  
  
21

  
  
22

  
  
23

  
  
24

  
  
25

  
  
26

  
  
27

  
  
28

  
  
29

  
  
30

  
  
31

  
  
32

  
  
33

  
  
34

  
  
35

  
  
36

  
  
37

  
  
38

  
  
39

  
  
40

  
  
41

  
  
42

  
  
43

  
  
44

  
  
45

  
  
46

  
  
47

  
  
48

  
  
49

  
  
50

  
  
51

  
  
52

  
  
53

  
  
54

  
  
55

  
  
56

  
  
57

  
  
58

  
  
59

  
  
60

  
  
61

  
  
62

  
  
63

  
  
64

  
  
65

  
  
66

  
  
67

  
  
68

  
  
69

  
  
70

  
  
71

  
  
72

  
  
73

  
  
74

  
  
75

  
  
76

  
  
77

  
  
78

  
  
79

  
  
80

  
  
81

  
  
82

  
  
83

  
  
84

  
  
85

  
  
86

  
  
87

  
  
88

  
  
89

  
  
90

  
  
91

  
  
92

  
  
93

  
  
94

  
  
95

  
  
96

  
  
97

  
  
98

  
  
99

  
  
100

  
  
101

  
  
102

  
  
103

  
  
104

  
  
105

  
  
106

  
  
107

  
  
108

  
  
109

  
  
110

  
  
111

  
  
112

  
  
113

  
  
114

  
  
115

  
  
116

  
  
117

  
  
118

  
  
119

  
  
120

  
  
121

  
  
122

  
  
123

  
  
124

  
  
125
 
 

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

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

 
 


  
  
1
 
 

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;
    }
  }

 
 


  
  
1

  
  
2

  
  
3

  
  
4

  
  
5

  
  
6

  
  
7

  
  
8

  
  
9

  
  
10

  
  
11

  
  
12

  
  
13

  
  
14
 
 

在组件里调用actions方法

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

 
 


  
  
1

  
  
2

  
  
3

  
  
4
 
 

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

this.$store.state.menu.products 

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

原文发布时间：
原文作者：一念执着。c
本文来源CSDN博客如需转载请紧急联系作者