Vuex+mixin实现组件间的解耦和复用

src/store/index.js

import Vue from 'vue' import Vuex from 'vuex' import book from './modules/book' import getters from './getters' import actions from './actions' Vue.use(Vuex) export default new Vuex.store({ modules: { book }, getters, actions })

src/store/modules/book.js

const book = { state: { fileName: '' }, mutations: { 'SET_FILENAME': (state,fileName) => { state.fileName = fileName } } } export default book

src/store/getters.js

const book = { fileName: state => state.book.fileName } export default book

src/store/actions.js

const actions = { setFileName: ({commit}, fileName) => { return commit('SET_FILENAME', filename) } } export default actions

src/utils/mixin.js

import { mapGetters,mapActions } from 'vuex' export const ebookMixin = { computed: { ...mapGetters([ 'fileName' ]) }, methods: { ...mapActions([ 'setFileName' ]} } }