vuex学习

参考

配置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
}
}
}
坚持原创技术分享,您的支持将鼓励我继续创作!