Vuex练手

config.js

@@ -14,5 +14,11 @@ module.exports = {
     proxyTable: {
 
     }
-  }
+  },
+  API_ROOT:(process.env.NODE_ENV === 'production')
+    ? 'http://www.baidu.com/'
+    : 'http://localhost:9090/',
+  CookieDomain : (process.env.NODE_ENV === 'production')
+    ? '.baidu.com'
+    :''
 }

package.json

@@ -35,6 +35,7 @@
     "url-loader": "^0.5.7",
 
     "mockjs": "^1.0.0",
+    "react-cookie": "^0.4.5",
 
 
     "vue-waterfall":"^0.2.1",

src/App.vue

@@ -63,16 +63,16 @@
   import store from './vuex/store'
 
   export default {
-    data(){
+    /*data(){
       return {
         progressbar           : false,  //loading-bar
         effect            : 'fade', //路由模板动画参数
         routeList         : [],     //访问周期中所访问了那些路径,在route.js中设置
       }
-    },
-    store,
-    components:{
+    },*/
+    store
+    /*components:{
       //progressBar
-    }
+    }*/
   }
 </script>

src/api/index.js

@@ -0,0 +1,10 @@
+/**
+ * Created by dinglei on 16/4/24.
+ */
+import { ListResource } from './resources'
+
+export default {
+  getLists:function () {
+    return ListResource.get({id: '123'})
+  },
+}

src/api/resources.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import VueResource from 'vue-resource'
+import {API_ROOT} from '../../config'
+import { getCookie,signOut } from '../utils/authService'
+
+Vue.use(VueResource)
+
+// HTTP相关
+Vue.http.options.crossOrigin = true
+Vue.http.options.xhr = {withCredentials: true}
+
+Vue.http.interceptors.push({
+  request (request) {
+    // 这里对请求体进行处理
+    request.headers = request.headers || {}
+    if (getCookie('token')) {
+      request.headers.Authorization = 'Bearer ' + getCookie('token').replace(/(^\")|(\"$)/g, '')
+    }
+    return request
+  },
+  response (response) {
+    // 这里可以对响应的结果进行处理
+    if (response.status === 401) {
+      signOut()
+      window.location.pathname = '/login'
+    }
+    return response
+  }
+})
+
+export const ListResource = Vue.resource(API_ROOT + 'src/mock/list.json')

src/api/shop.js

@@ -1,12 +1,8 @@
-/**
- * Mocking client-server processing
- */
 const _products = [
   {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2},
   {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},
   {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}
 ]
-
 export default {
   getProducts (cb) {
     setTimeout(() => cb(_products), 100)

src/main.js

@@ -7,10 +7,9 @@ import configRouter from './routes'
 import filters from './utils/filters'
 
 import App from './App.vue'
-import lazyload from 'vue-lazyload'
 import Mock from 'mockjs'
 
-import './assets/styles/base.css'
+//import './assets/styles/base.css'
 
 Vue.config.debug = true
 
@@ -21,13 +20,6 @@ Object.keys(filters).forEach(k => Vue.filter(k, filters[k]))
 
 $.ajaxSettings.crossDomain = true;
 
-
-Vue.use(lazyload, {
-  error: '../../src/assets/images/common/error.png',
-  loading: '../../src/assets/images/common/loading.gif',
-  try: 3 // default 2
-});
-
 const router = new VueRouter({
   //abstract:true,
   //地址栏不会有变化

src/routes.js

@@ -10,6 +10,14 @@ export default function (router) {
       component: require('./App.vue')
     },
 
+    //数据列表
+    '/list':{
+      name:'list',
+      component: function(reslove){
+        return require(['./views/list.vue'],reslove)
+      }
+    },
+
     //购物车主页
     '/cartindex':{
       name:'cartindex',

src/utils/authService.js

@@ -0,0 +1,26 @@
+import cookie from 'react-cookie'
+import { CookieDomain } from '../../config.js'
+let cookieConfig = {}
+if(CookieDomain !== ''){
+  cookieConfig = { domain: CookieDomain }
+}
+
+export function saveCookie(name,value) {
+  cookie.save(name, value, cookieConfig)
+}
+
+export function getCookie(name) {
+  return cookie.load(name)
+}
+
+export function removeCookie(name) {
+  cookie.remove(name, cookieConfig)
+}
+
+export function signOut() {
+  cookie.remove('token', cookieConfig)
+}
+
+export function isLogin() {
+  return !!cookie.load('token')
+}

src/views/list.vue

@@ -0,0 +1,38 @@
+<style>
+
+</style>
+
+<template>
+
+  <ul>
+    <li v-for="item in lists"> {{item.title}}</li>
+  </ul>
+
+</template>
+
+<script>
+  import { getAjax } from '../vuex/actions'
+
+  export default {
+    vuex: {
+      getters: {
+        //lists: ({lists}) => lists
+
+        lists: function (state) {
+          console.log(state)
+          return state.lists
+        }
+      },
+      actions:{
+        getAjax
+      }
+    },
+    route:{
+      activate ({ next }) {
+        this.getAjax()
+        next()
+      }
+    }
+
+  }
+</script>

src/vuex/actions.js

@@ -1,4 +1,4 @@
-import shop from '../api/shop'
+import api from '../api'
 import * as types from './mutation-types'
 
 export const addToCart = ({ dispatch }, product) => {
@@ -10,15 +10,27 @@ export const addToCart = ({ dispatch }, product) => {
 export const checkout = ({ dispatch, state }, products) => {
   const savedCartItems = [...state.cart.added]
   dispatch(types.CHECKOUT_REQUEST)
-  shop.buyProducts(
+  api.buyProducts(
     products,
     () => dispatch(types.CHECKOUT_SUCCESS),
     () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
   )
 }
 
 export const getAllProducts = ({ dispatch }) => {
-  shop.getProducts(products => {
+  api.getProducts(products => {
     dispatch(types.RECEIVE_PRODUCTS, products)
   })
 }
+
+export const getAjax = ({ dispatch }) => {
+  api.getLists().then(response => {
+    if(!response.code == 0){
+      return dispatch(types.FAILURE_GET_LISTS)
+    }
+    dispatch(types.SUCCESS_GET_LISTS, { lists: response })
+  }, response => {
+    dispatch(types.FAILURE_GET_LISTS)
+  })
+}
+

src/vuex/modules/list.js

@@ -0,0 +1,26 @@
+import {
+  SUCCESS_GET_LISTS,
+  FAILURE_GET_LISTS
+} from '../mutation-types'
+
+// initial state
+const state = {
+  all: []
+}
+
+// mutations
+const mutations = {
+  [FAILURE_GET_LISTS](state){
+    state.items = []
+  },
+  [SUCCESS_GET_LISTS](state,action){
+   // console.log(state)
+    //console.log(action)
+    state.items = action.lists.data.data
+  }
+}
+
+export default {
+  state,
+  mutations
+}

src/vuex/mutation-types.js

@@ -3,3 +3,11 @@ export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
 export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
 export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
 export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'
+
+
+
+
+
+export const SUCCESS_GET_LISTS = 'SUCCESS_GET_LISTS'
+export const FAILURE_GET_LISTS = 'FAILURE_GET_LISTS'
+

src/vuex/store.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import cart from './modules/cart'
 import products from './modules/products'
+import list from './modules/list'
 import createLogger from '../../src/middlewares/logger'
 
 Vue.use(Vuex)
@@ -12,7 +13,8 @@ const debug = process.env.NODE_ENV !== 'production'
 export default new Vuex.Store({
   modules: {
     cart,
-    products
+    products,
+    list
   },
   strict: debug,
   middlewares: debug ? [createLogger()] : []