大型项目中 为了简化数据的传递通常我们会使用VUEX插件 下面是VUEX的基本使用方法

1. 首先在入口文件main.js中引入

import   store   from './vuex';

new Vue({

router:appRouter,

store,

el:'#app',

});

   下面是我定义的vuex的目录结构

这里还要明确一下 文件的作用 

index.js 是vuex文件的入口文件  里面定义的是 状态对象 （全局变量）

actions.js定义的是全局的异步动作   可以将ajax请求写在actions.js里面

getters.js的作用是计算属性

mutations.js触发状态作用是修改全局变量

下面列出来每一个的书写方式  最后是页面如何调用的方法

---

index.js                          

import Vue from'vue';

import Vuex from'vuex';

import actions from'./actions';

import getters from'./getters';

import mutations from'./mutations';

Vue.use(Vuex);

let mainStore=newVuex.Store({

state:{

      firstData:"在state中定义全局变量",

      lastDate:"记得用逗号隔开",

      countDate:0

},

mutations:mutations,

actions:actions,

getters:getters

});

export defaultmainStore;

---

mutations.js

function update(state,data){

        state.firstData=data;

}

var  mutations={

        update:update

};

export defaultmutations;

---

actions.js

import  Vue   from'vue';

function    asynchronous(store,data) {

returnnewPromise(

(resolve,reject)=>{

Vue.http.post('/uxDesign-Proxy/magic/queryInterfaceInfo',data)

.then((res)=>{

resolve(res)

},(err)=>{

reject("error")

})

})

}

var actions={

asynchronous:asynchronous

}

export default actions;

---

getters.js

function computeData(store){

    state.countDate +=100

}

var getters={

    computeData:computeData

};

export default getters;

---

页面中的调用方法

获取全局变量:

this.$store.state.firstData

修改全局变量：

this.$store.commit("update","data")      //第一个参数是方法名 第二个参数是传入的值

异步请求：

this.$dispatch("asynchronous").then((res)=>{

    //这里写 resolve  返回成功后执行方法

}).catch((res)=>{

  // 这里写reject  出错后执行的方法

})

数据计算：

this.$store.getters.computeData