参考

配置Vuex

在src下创建一个文件夹叫做vuex。里面定义三个文件。

mutation-types.js 定义类型的

// src/vuex/mutation-types.jsexport 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.jsimport 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'// 导入各个模块的初始状态和 mutationsimport 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.jsimport {    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.vueimport 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拿数据，然后渲染到页面上// 如果需要修改可以调用setTitleimport { setTitle } from '../vuex/actions'export default {    vuex: {        //获取vuex状态数据        getters: {            title: state => state.title,            info: ({index}) => index.info        },        //状态变更事件        actions: {            setTitle        }    }}