对Vuex进行更深一层学习

通常为大型项目的vuex文件夹目录：

actions

对mutations的直接操作，主要包含js逻辑，对数据的处理，通过export default 暴露给组件当做一般的方法使用（与methods里的方法雷同）；

代码结构

import shop from '../api/shop'
import * as types from './mutation-types'
export const addToCart = ({ dispatch },product) => {

if (product.inventory > 0) {

dispatch(types.ADD_TO_CART,product.id)

}

}
export const checkout = ({ dispatch,state },products) => {

const savedCartItems = [...state.cart.added]

dispatch(types.CHECKOUT_REQUEST)

shop.buyProducts(

products,() => dispatch(types.CHECKOUT_SUCCESS),() => dispatch(types.CHECKOUT_FAILURE,savedCartItems)

)

}
export const getAllProducts = ({ dispatch }) => {

shop.getProducts(products => {

dispatch(types.RECEIVE_PRODUCTS,products)

})

}

*actions文件里面主要引入了mutation-types.js文件里需要使用到的mutations名字常量，以及用到的api（vue-resource部分）异步获取数据的对象，最终将方法暴露给组件使用*
注意：actions函数里面，第一个参数一定是store（或者为结构形式）

getters.js

对state的直接操作，主要返回state子树的数据，通过export default 暴露给组件当做一般的数据使用（与data里的数据雷同）；

代码结构

export const cartProducts = state => {
  return state.cart.added.map(({ id,quantity }) => {
    const product = state.products.all.find(p => p.id === id)
    return {
      title: product.title,price: product.price,quantity
    }
  })
}

*getter.js可以在头部可以引入store.jsimport store from ‘../store.js’,将所有的元数据引入返回给组件使用*

modules

各个模块的state和mutations（一个模块一个js文件包含该模块的state和mutations），通过export default 暴露给store.js以注入到主组件App.vue中；

代码结构

// modules目录下的cart.js文件
import {
  ADD_TO_CART,CHECKOUT_REQUEST,CHECKOUT_SUCCESS,CHECKOUT_FAILURE
} from '../mutation-types'
// initial state

// shape: [{ id,quantity }]

const state = {

added: [],lastCheckout: null

}
// mutations

const mutations = {

[ADD_TO_CART] (state,productId) {

state.lastCheckout = null

const record = state.added.find(p => p.id === productId)

if (!record) {

state.added.push({

id: productId,quantity: 1

})

} else {

record.quantity++

}

},[CHECKOUT_REQUEST] (state) {

// clear cart

state.added = []

state.lastCheckout = null

},[CHECKOUT_SUCCESS] (state) {

state.lastCheckout = 'successful'

},[CHECKOUT_FAILURE] (state,savedCartItems) {

// rollback to the cart saved before sending the request

state.added = savedCartItems

state.lastCheckout = 'Failed'

}

}
export default {

state,mutations

}

*modules包含多个js文件，每个js文件都是一个页面的state和mutations的集合，也是项目应用数据的各个分支*
注意：mutations函数里面，第一个参数一定是所属的store里面的整个state对象

store.js

整合各个modules里面的模块，通过export default 暴露，注入到主组件App.vue中

代码结构

import Vue from 'vue'
import Vuex from '../../../src'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/middlewares/logger'
Vue.use(Vuex)

Vue.config.debug = true
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({

modules: {

cart,products

},strict: debug,middlewares: debug ? [createLogger()] : []

})

*store.js文件头部引入vue和vuex，还有中间件、modules里的各个部分，整合modules里所有的文件（页面数据状态和操作）暴露给主组件App.vue注入*

mutation-types.js

定义mutations命名的常量（大写字母），建立actions与mutations的约定，两个文件都需要import使用常量名。

代码结构

export const ADD_TO_CART = 'ADD_TO_CART'
export const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
export const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
export const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
export const RECEIVE_PRODUCTS = 'RECEIVE_PRODUCTS'