vuex 简单使用

设置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 是否显示
    visible: true
  },
  mutations: {// 同步操作，可修改
    setVisible (state, value) {
        state.visible = value
    },
  },
  getters: {// 可以认为是 store 的计算属性
    getVisible(state) {
      return state.visible;
    }
  },
  actions: {// 异步操作，不可修改，交给mutations 
    setVisibleAction ({commit},payload) {
      commit("setVisible",payload)
    },
  },
  modules: {
  }
})

 使用

computed: {
	close: {
		set (value) {
			/ 两种方式，1. commits是同步；2. dispatch 是异步
			// return this.$store.commit('setVisible', value)
			return this.$store.dispatch('setVisibleAction', value)
		},
		get () {
            // 两种方式，1. getter；2. state
			// return this.$store.getters.getVisible
			return this.$store.state.visible
		},
	}
}