参考
设置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
}
}
}