Vuex學習

參考

• 使用 Vuex + Vue.js 構建單頁應用

• 使用Vue.js和Vuex實現購物車場景
  vue-demo-collection

配置Vuex

在src下建立一個文件夾叫作vuex。裏面定義三個文件。

mutation-types.js 定義類型的

// src/vuex/mutation-types.js
export const SET_HEADER_TITLE = 'SET_HEADER_TITLE'

actions.js 操做，能夠分解成多個文件

// src/vuex/actions.js
/**
 * 用統一的函數處理並分發mutations。
 * @param type
 * @returns {function({dispatch: *}, ...[*]): *}
 */
function makeAction (type) {
    return ({ dispatch }, ...args) => dispatch(type, ...args)
}

import {
    SET_HEADER_TITLE
} from './mutation-types'

/**
 * actions
 */
export const setTitle = makeAction(SET_HEADER_TITLE)

store.js 入口文件，在根組件調用，而後全部子組件能夠共享數據。

// src/vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
//import createLogger from 'vuex/logger'

Vue.use(Vuex)
//Vue.config.debug = true
//const debug = process.env.NODE_ENV !== 'production'

// 導入各個模塊的初始狀態和 mutations
import index from './modules/index'
export default new Vuex.Store({
    // 組合各個模塊
    modules: {
        index
    },
    //strict: debug,
    //moddlewares: debug ? [createLogger()] : []
})

modules/index.js 只是例子用的，一個index的操做，須要定義數據的狀態和mutation。actions.js只是分發操做。

// src/vuex/modules/index.js
import {
    SET_HEADER_TITLE
} from '../mutation-types'

const state = {
    title: 'default',
    info: {
        name:''
    }
}

const mutations = {
    [SET_HEADER_TITLE](state, newTitle) {
        state.title = newTitle
    }
}

export default {
    state,
    mutations
}

掛載store

// src/App.vue
import store from './vuex/store'
import HeaderComponent from './components/header'
import FooterComponent from './components/footer'
export default {
    store,
    components: {
        HeaderComponent,
        FooterComponent
    }
}

獲取數據及操做

// src/components/header.vue
// 從vuex拿數據，而後渲染到頁面上
// 若是須要修改能夠調用setTitle
import { setTitle } from '../vuex/actions'
export default {
    vuex: {
        //獲取vuex狀態數據
        getters: {
            title: state => state.title,
            info: ({index}) => index.info
        },
        //狀態變動事件
        actions: {
            setTitle
        }
    }
}