Vuex學(xué)習(xí)

codeKK 發(fā)布于2019-08-20 11:19 / 3294人閱讀

摘要：參考使用構(gòu)建單頁應(yīng)用使用和實現(xiàn)購物車場景配置在下創(chuàng)建一個文件夾叫做。入口文件，在根組件調(diào)用，然后所有子組件可以共享數(shù)據(jù)。掛載獲取數(shù)據(jù)及操作從拿數(shù)據(jù)，然后渲染到頁面上如果需要修改可以調(diào)用獲取狀態(tài)數(shù)據(jù)狀態(tài)變更事件

參考

使用 Vuex + Vue.js 構(gòu)建單頁應(yīng)用

使用Vue.js和Vuex實現(xiàn)購物車場景
vue-demo-collection

配置Vuex

在src下創(chuàng)建一個文件夾叫做vuex。里面定義三個文件。

mutation-types.js 定義類型的

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

actions.js 操作，可以分解成多個文件

// src/vuex/actions.js
/**
 * 用統(tǒng)一的函數(shù)處理并分發(fā)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 入口文件，在根組件調(diào)用，然后所有子組件可以共享數(shù)據(jù)。

// 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"

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

modules/index.js 只是例子用的，一個index的操作，需要定義數(shù)據(jù)的狀態(tài)和mutation。actions.js只是分發(fā)操作。

// 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
    }
}

獲取數(shù)據(jù)及操作

// src/components/header.vue
// 從vuex拿數(shù)據(jù)，然后渲染到頁面上
// 如果需要修改可以調(diào)用setTitle
import { setTitle } from "../vuex/actions"
export default {
    vuex: {
        //獲取vuex狀態(tài)數(shù)據(jù)
        getters: {
            title: state => state.title,
            info: ({index}) => index.info
        },
        //狀態(tài)變更事件
        actions: {
            setTitle
        }
    }
}