标签:func ons 16px index 应用程序开发 this UNC getter 一起
打开项目所在文件目录,执行下载命令
npm install vuex -S1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from ‘vue‘ 4 // process.env.MOCK && require(‘@/mock‘) 5 import ‘element-ui/lib/theme-chalk/index.css‘ 6 import App from ‘./App‘ 7 import router from ‘./router‘ 8 import ElementUI from ‘element-ui‘ 9 import axios from ‘@/api/http‘ 10 // import axios from ‘axios‘ 11 import VueAxios from ‘vue-axios‘ 12 import store from ‘./store‘ 13 14 15 16 Vue.use(VueAxios,axios) 17 Vue.use(ElementUI) 18 Vue.config.productionTip = false 19 20 /* eslint-disable no-new */ 21 new Vue({ 22 el: ‘#app‘, 23 data(){ 24 return{ 25 Bus:new Vue({ 26 27 }) 28 } 29 }, 30 router, 31 store, 32 components: { App }, 33 template: ‘<App/>‘ 34 })
4.1 store
每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。
const store = new Vuex.Store({
state, // 共同维护的一个状态,state里面可以是很多个全局状态
getters, // 获取数据并渲染
actions, // 数据的异步操作
mutations // 处理数据的唯一途径,state的改变或赋值只能在这里
})
1 import Vue from ‘vue‘ 2 import Vuex from ‘vuex‘ 3 import state from ‘./State‘ 4 import getters from ‘./Getters‘ 5 import actions from ‘./Actions‘ 6 import mutations from ‘./Mutations‘ 7 Vue.use(Vuex) 8 const store = new Vuex.Store({ 9 state, 10 getters, 11 actions, 12 mutations 13 }) 14 15 export default store
状态,即要全局读写的数据
const state = {
resturantName:‘飞歌餐馆‘
};
export default {
resturantName: ‘天天餐馆‘
}
export default {
getResturantName: (state) => {
return state.resturantName;
}
}
export default {
setResturantName: (state, payload) => {
state.resturantName = payload.resturantName;
}
}
数据的异步(async)操作
1 export default { 2 setResturantNameByAsync: (context, payload) => { 3 console.log(‘xxxx‘); 4 setTimeout(() => { 5 console.log(‘yyyy‘); 6 console.log(payload) 7 // state.resturantName = payload.resturantName; 8 context.commit(‘setResturantName‘, payload); //Action提交的是mutation 9 }, 6000) 10 console.log(‘zzzz‘); 11 //在这个里面是获取不到Vue实例的 12 }, 13 doAjax: (context, payload) => { 14 let _this = payload._this; 15 let url = _this.axios.urls.SYSTEM_USER_DOLOGIN; 16 _this.axios.post(url, {}).then((response) => { 17 console.log(response); 18 }).catch(function(error) { 19 console.log(error); 20 }); 21 }, 22 }
标签:func ons 16px index 应用程序开发 this UNC getter 一起
原文地址:https://www.cnblogs.com/ly-0919/p/11479173.html