vuex+mixin组件共享状态

1.src目录下创建store目录存放vuex相关的代码
2.在src目录下创建utils目录

home.js编写vuex的state，mutations属性

const home = {
  state: {
    title: '音乐馆'
  },
  mutations: {
    'SET_TITLE': (state, title) => {
      state.title = title
    }
  }
}

export default home

actions.js编写vuex的mutations方法来修改state中的属性

const actions = {
  setTitle: ({ commit }, title) => {
    return commit('SET_TITLE', title)
  }
}

export default actions

getters.js用来简化模块使用state中的属性

const home = {
  title: state => state.home.title
}

export default home

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import home from './modules/home'
import getters from './getters'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    home
  },
  getters,
  actions
})

在mixin.js中提取出公共部分

import { mapGetters, mapActions } from 'vuex'

export const musicMixin = {
  computed: {
    ...mapGetters([
      'title'
    ])
  },
  methods: {
    ...mapActions([
      'setTitle'
    ])
  }
}

然后在需要使用的组件中引用和混入mixin.js就可以了，修改值直接在方法中调用this.setTitle(title)就可以了

import { musicMixin } from '@/utils/mixin'
export default {
	mixins: [musicMixin]
}