大型项目中 为了简化数据的传递通常我们会使用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