vuex状态管理

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import state from ‘./state‘
import getters from ‘./getters‘
import actions from ‘./actions‘
import mutations from ‘./mutations‘

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
})

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘
import store from ‘./store‘

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount(‘#app‘)

const state = {
    appName: ‘admin‘
}
export default state

 computed: {
    appName () {
      return this.$store.state.appName;
    }
  }

computed: {
    ...mapState({
      appName: state => state.appName
    })
  }

computed: {
    ...mapState([‘appName‘])
  }

const getters = {
    appNameWithVersion (state) {
        return `${state.appName}v2.0`
    }
}
export default getters

computed: {
    appNameWithVersion () {
      return this.$store.getters.appNameWithVersion;
    }
  }

computed: {
    ...mapGetters([‘appNameWithVersion‘])
  }

const mutations = {
    setAppName (state, params) {
        state.appName = params
    }
}
export default mutations

methods: {
    updateAppName () {
      this.$store.commit(‘setAppName‘, ‘admin2‘)
    }
  }

methods: {
    ...mapMutations([‘setAppName‘]),
    updateAppName () {
      this.setAppName(‘admin2‘);
    }
  }

const actions = {
    setName (state, name) {
        setTimeout(() => {
            state.commit(‘setAppName‘, name)
        }, 2000)
    }
}
export default actions

methods: {
    updateAppName () {
      this.$store.dispatch(‘setName‘, ‘admin3‘)
    }
  }    

methods: {
    ...mapActions([‘setName‘]),
    updateAppName () {
      this.setName(‘admin3‘)
    }
  }