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