vuex的一些小问题,下面有个详细的

1.index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    isCollapse: false // 1,定义全局state
  },
  getters: { // 2, 实时监听state值的变化(最新状态)
    isShow(state) { // 方法名随意,主要是来承载变化的showFooter的值
      console.log('state', state)
      return state.isCollapse
    }
  },
  actions: {
  },
  // modules: {
  // }
  mutations // 改变state,mutations也是一个对象，这个对象里面可以放改变state的初始值的方法
})

2,mutation.js

• 2.1,风格一

export default {
  /**
   * Mutation 必须是同步函数
   * 我们在项目中最常用的就是mutation.js里面的方法了。因为更改vuex中的store里的state的唯一的方式就是提交mutation
   * 在vuex中，每个mutation都有一个字符串的事件类型(mutation-type)和一个回调函数(handler)
   */
   3,自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象)
  changeCollapse(state, payload) {
    console.log('payload', payload)
    state.isCollapse = payload
  }
}

• 2.2:风格二

// 1,新建mutation-type.js,内容如下：
export default {
  IS_COLLAPSE: 'IS_COLLAPSE' // 定义一个全局的type
}

// 2.mutation.js引入这个types文件
import * as types from './mutation-types';
export default {
    [TYPES.IS_COLLAPSE] (state, payload) {
        state.isCollapse = payload
    }
}

3,在页面里面使用这个全局的state

// 某个vue文件改变这个全局的state
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
        isCollapse: state => state.isCollapse
    })
  },
  /**
   * 可以在组件中使用 this.$store.commit('xxx') 提交 mutation，
   * 或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
   */
  methods: {
    toggleShow() {
        this.$store.commit('changeCollapse', !this.isCollapse)
        // 或者  this.$store.commit('IS_COLLAPSE', !this.isCollapse)
    }
  }
}
</script>

4,如果使用 mapMutations,步骤3里面的代码可以改成下面这样,mapMutations传参是在html里面写的

<div @click="toggleShow(!isCollapse)">

import { mapState, mapMutations } from 'vuex'
computed: {
    ...mapState({
      isCollapse: state => state.isCollapse
    })
},
methods: {
    ...mapMutations({
        // toggleShow: 'changeCollapse'
        toggleShow: 'IS_COLLAPSE'
    }),
}