对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'
