刘文博 / gulu-vue

Download as
Browse Code »

Commit 843fce64ee0c83315d91d4feea9a44d67b4809ff

Authored by wulunyi
1 parent 71166190e9
Exists in master

feat(master): 加入 vuex 的使用

Showing 9 changed files with 142 additions and 67 deletions   Show diff stats
... ... @@ -2,6 +2,7 @@
2 2 node_modules/
3 3 unpackage/
4 4 dist/
  5 +.history
5 6  
6 7 # local env files
7 8 .env.local
... ...
... ... @@ -6,7 +6,7 @@
6 6 console.log('App Launch')
7 7 },
8 8 onShow() {
9   -
  9 +
10 10 console.log('App Show')
11 11 },
12 12 onHide() {
... ... @@ -17,4 +17,4 @@
17 17  
18 18 <style>
19 19 /*每个页面公共css */
20   -</style>
  20 +</style>
... ...
... ... @@ -0,0 +1,17 @@
  1 +import Vue from 'vue'
  2 +import App from './App.vue'
  3 +import store from './store/index'
  4 +
  5 +Vue.config.productionTip = false
  6 +Vue.prototype.sendRequest = function(param){
  7 + let _self = this,
  8 + url = param.url,
  9 + data = param.data,
  10 + header = param.header,
  11 + token = '';
  12 + //拼接完整请求url
  13 + let requestUrl = this.baseUrl + url;
  14 +}
  15 +
  16 +
  17 +new App({store}).$mount()
... ...
src/main.ts
View file @7116619
... ... @@ -1,18 +0,0 @@
1   -import Vue from 'vue'
2   -import App from './App.vue'
3   -
4   -
5   -Vue.config.productionTip = false
6   -Vue.prototype.sendRequest = function(param:any){
7   - let _self = this,
8   - url = param.url,
9   - data = param.data,
10   - header = param.header,
11   - token = '';
12   - //拼接完整请求url
13   - let requestUrl = this.baseUrl + url;
14   -
15   -
16   -
17   -}
18   -new App().$mount()
src/pages/addArddess/addArddess.vue
Diff comments   View file @843fce6
... ... @@ -30,7 +30,7 @@
30 30 </template>
31 31  
32 32 <script>
33   - import SimpleAddress from '@/components/Simple-address/Simple-address.vue';
  33 + import SimpleAddress from '@/components/Simple-address/simple-address.vue';
34 34 export default {
35 35 data() {
36 36 return {
... ...
src/pages/index/index.vue
Diff comments   View file @843fce6
... ... @@ -77,10 +77,12 @@
77 77 </template>
78 78  
79 79 <script>
80   -import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
  80 +import UniDrawer from "../../components/uni-drawer/uni-drawer.vue";
81 81 import Card from "../../components/Card/Card.vue";
82 82 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
83 83 import data from "@/common/data.js"; //筛选菜单数据
  84 +import store from '@/store';
  85 +
84 86 export default {
85 87 components: {
86 88 UniDrawer: UniDrawer,
... ... @@ -101,57 +103,65 @@ export default {
101 103 indexArr: "",
102 104 valueArr: "",
103 105 // //商品数据
104   - goodsList: [
105   - {
106   - // goods_id: 0,
107   - // img: "/static/img/goods/p1.jpg",
108   - // name: "商品名称",
109   - // originCost: "￥198",
110   - // price: "￥168",
111   - // slogan: "1235人浏览"
112   - }
113   - ],
  106 + // goodsList: [
  107 + // {
  108 + // // goods_id: 0,
  109 + // // img: "/static/img/goods/p1.jpg",
  110 + // // name: "商品名称",
  111 + // // originCost: "￥198",
  112 + // // price: "￥168",
  113 + // // slogan: "1235人浏览"
  114 + // }
  115 + // ],
114 116 loadingText: "正在加载...",
115 117 filterDropdownValue: [],
116 118 filterData: []
117 119 };
118 120 },
  121 + computed: {
  122 + goodsList() {
  123 + // 也可以从 getters 获取
  124 + console.log(this.$store.getters.list);
  125 + return this.$store.state.test.list;
  126 + }
  127 + },
119 128 filters: {
120 129 outData(value) {
121 130 return JSON.stringify(value);
122 131 }
123 132 },
124 133 onLoad: function() {
125   - uni.request({
126   - url: "https://api.glass.xiuyetang.com/app/prod/list",
127   - method: "post",
128   - data: {
129   - // text: 'uni.request'
130   - },
131   - header: {
132   - // 'custom-header': 'hello', //自定义请求头信息
133   - "Content-Type": "application/x-www-form-urlencoded"
134   - // 'Content-Type':'multipart/form-data'
135   - // 'Content-Type':'ext/plain'
136   - },
137   - timeout: 3000,
138   - // dataType:'json'
139   - // responseType:'text',
140   - // sslVerify: true,//验证 ssl 证书
141   - withCredentials: false, //跨域请求时是否携带凭证（cookies）
142   - success: res => {
143   - console.error("success status === > ", res);
144   - this.goodsList = res.data.data;
145   - // console.log('res.data', res.data);
146   - // this.text = 'request success';
147   - },
148   - fail: res => {
149   - console.log("fail status === > ", res);
150   - },
151   - complete: res => {
152   - console.log("complete status === > ", res);
153   - }
154   - });
  134 + store.dispatch('test/fetch');
  135 + // uni.request({
  136 + // url: "https://api.glass.xiuyetang.com/app/prod/list",
  137 + // method: "post",
  138 + // data: {
  139 + // // text: 'uni.request'
  140 + // },
  141 + // header: {
  142 + // // 'custom-header': 'hello', //自定义请求头信息
  143 + // "Content-Type": "application/x-www-form-urlencoded"
  144 + // // 'Content-Type':'multipart/form-data'
  145 + // // 'Content-Type':'ext/plain'
  146 + // },
  147 + // timeout: 3000,
  148 + // // dataType:'json'
  149 + // // responseType:'text',
  150 + // // sslVerify: true,//验证 ssl 证书
  151 + // withCredentials: false, //跨域请求时是否携带凭证（cookies）
  152 + // success: res => {
  153 + // console.error("success status === > ", res);
  154 + // this.goodsList = res.data.data;
  155 + // // console.log('res.data', res.data);
  156 + // // this.text = 'request success';
  157 + // },
  158 + // fail: res => {
  159 + // console.log("fail status === > ", res);
  160 + // },
  161 + // complete: res => {
  162 + // console.log("complete status === > ", res);
  163 + // }
  164 + // });
155 165 //定时器模拟ajax异步请求数据
156 166 // setTimeout(()=>{
157 167 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
... ...
src/pages/myOrder/myOrder.vue
Diff comments   View file @843fce6
... ... @@ -18,10 +18,10 @@
18 18 </view>
19 19 </view>
20 20 <view class="footer">已显示全部</view>
21   - </view>
22   -</template>
  21 + </view>
  22 +</template>
23 23 <script>
24   - import OrderCard from './OrderCard.vue'
  24 + import OrderCard from './orderCard.vue'
25 25 export default {
26 26 components:{
27 27 'OrderCard':OrderCard
... ... @@ -35,7 +35,7 @@
35 35 {current:3,text:'待收货'},
36 36 {current:4,text:'退款售后'},
37 37 ],
38   - current: 0,
  38 + current: 0,
39 39 //订单数据
40 40 orderList:[
41 41 { orderId: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:1 ,buyNum:1},
... ... @@ -47,7 +47,7 @@
47 47 { orderId: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:4 ,buyNum:1},
48 48 { orderId: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1},
49 49 { orderId: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', orderType:5 ,buyNum:1}
50   - ],
  50 + ],
51 51  
52 52 };
53 53 },
... ...
src/store/index.js
Diff comments   View file @843fce6
... ... @@ -0,0 +1,24 @@
  1 +import Vue from 'vue'
  2 +import Vuex from 'vuex'
  3 +
  4 +Vue.use(Vuex)
  5 +
  6 +const modulesFiles = require.context('./modules', true, /\.js$/)
  7 +
  8 +const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  9 + const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  10 + const value = modulesFiles(modulePath)
  11 +
  12 + modules[moduleName] = value.default
  13 +
  14 + return modules
  15 +}, {})
  16 +
  17 +const store = new Vuex.Store({
  18 + modules,
  19 + getters: {
  20 + list: state => state.test.list
  21 + }
  22 +})
  23 +
  24 +export default store;
0 25 \ No newline at end of file
... ...
src/store/modules/test.js
Diff comments   View file @843fce6
... ... @@ -0,0 +1,41 @@
  1 +const state = {
  2 + list: [],
  3 +};
  4 +
  5 +const mutations = {
  6 + INIT: (state, list) => {
  7 + state.list = list;
  8 + },
  9 +};
  10 +
  11 +const actions = {
  12 + fetch({ commit }, param) {
  13 + uni
  14 + .request({
  15 + url: "https://api.glass.xiuyetang.com/app/prod/list",
  16 + method: "post",
  17 + data: {},
  18 + header: {
  19 + "Content-Type": "application/x-www-form-urlencoded",
  20 + },
  21 + timeout: 3000,
  22 + withCredentials: false,
  23 + success: (res) => {
  24 + commit('INIT', res.data.data)
  25 + },
  26 + fail: (res) => {
  27 + console.log("fail status === > ", res);
  28 + },
  29 + complete: (res) => {
  30 + console.log("complete status === > ", res);
  31 + },
  32 + });
  33 + },
  34 +};
  35 +
  36 +export default {
  37 + namespaced: true,
  38 + state,
  39 + mutations,
  40 + actions,
  41 +};
... ...