vuex使用

// store/index.js 入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import hander from './hander'
Vue.use(Vuex)

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

// store/index.js 入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import hander from './hander'
Vue.use(Vuex)

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

// store/hander.js
const hander = {
  namespaced: true, // 必须开启命名空间
  state: {
    handFlag: false
  },
  getter: {},
  mutations: {
    SET_HAND_SHOW (state, payload) {
      // 这里用state修改this修改不了
      state.handFlag = payload
    }
  },
  actions: {
    // 修改
    set_hand_show ({ commit }, data) {
      commit('SET_HAND_SHOW', data)
    }
  },
  module: {}
}
export default hander

Action使用：

<template>
  <div>
    <button @click="clickBtn">点我</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'vuex-page',
  methods: {
    ...mapActions('hander', ['set_hand_show']),
    clickBtn () {
      this.set_hand_show(true) // 修改vuex中state里面的handFlag
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

State读取：

<template>
  <div>
    {{ handFlag }}
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'vuex-page',
  computed: {
    ...mapState('hander', ['handFlag'])
  }
}
</script>

<style lang="scss" scoped>

</style>