vuex

理解

什么是vuex

• 专门再vue中实现集中式状态管理(数据)管理的一个Vue插件，可以实现多组件的共享状态进行集中式的管理，也是一种组件间通信的方式，而适应用于任意组件间通信

什么时候用vuex

• 多个组件依赖同一个数据

• 不同组件的行为会改变同一个数据

在组件中访问setings模块中的state,action,mutation,getter

访问state

• 原始方法

  • this.$store.settings.fixed---无论加不加命名空间都是这样

• mapState映射函数

  • mapState(['setings']) >>> this.setings.fixed ---没加名空间

  • mapState('settings',['fixed']) >>> this.fixed ---加了命名空间

  • createNamespacedHelpers函数 ---加了命名空间

import {createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("settings");

export default {
  name: "Dashboard",
  computed: {
    ...mapState(["fixed"]), //  >>>this.fixed
  },
}

访问action,mutation,getter

没加命名空间

//某个组件中
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['fixedGetter'])
  },
  methods: {
    ...mapActions(['changeFixedAction']),
    ...mapMutations(['changeFixedMutation'])
  },
  mounted() {
    this.$store.getters.fixedHeaderGetter)
	
    //第一参数是action的函数名,第二个参数是函数changeFixedAction的第二个参数
    this.$store.dispatch('changeFixedAction', '&&&&&')
	
    //第一参数是mutation的函数名,第二个参数是函数changeFixedMutation的第二个参数
    this.$store.commit('changeFixedMutation', '999')


    //通过映射函数访问
    this.fixedHeaderGetter //获得settings模块中定义的fixedHeaderGetter(是个getter)
    this.changeFixedAction('&&&&')
    this.changeFixedMutation('999')

  }
}

加了命名空间

//某个组件中
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters('settings',['fixedGetter'])
  },
  methods: {
    ...mapActions('settings',['changeFixedAction']),
    ...mapMutations('settings',['changeFixedMutation'])
  },
  mounted() {
	//获取到settings模块中定义的fixedHeaderGetter
    this.$store.getters['settings/fixedHeaderGetter']
	
    this.$store.dispatch('settings/changeFixedAction', '&&&&&')
	//第一参数是action的函数名,第二个参数是函数changeFixedAction的第二个参数
    this.$store.commit('settings/changeFixedMutation', '999')
	//第一参数是mutation的函数名,第二个参数是函数changeFixedMutation的第二个参数


    //通过映射函数访问
    this.fixedHeaderGetter
    this.changeFixedAction('&&&&')
    this.changeFixedMutation('999')

  }
}