vuex

组件之间的通信

props，this.$emit(事件，传值)

vuex

一个状态管理器，可以储存数据，实现组件之间的通信。

• state 存放数据
• getters 类似于计算属性
• Mutations 更改 Vuex store中的状态的唯一方法
  • 一个mutation = 一个事件类型 和 一个 回调函数
• Actions 类似于 mutation，不同在于：
  • Actions 提交的是mutation，而不是直接变更状态。
  • Actions 可以包含任意异步操作。

辅助函数使用：

• mapState({}) 与 mapGetters 放在组件中 computed 里面

import { mapState, mapGetters } from 'vuex';

    ...mapState([
      'curCity',
      'projectName'
    ]),
    ...mapGetters([
      'myLoveBooks'
    ])

• mapMutations 与 mapActions 放在组件中 methods 里面
• Mutation 必须是同步函数

mutations: {
    increment (state, payload) {
    state.count += payload.amount
  }
}
 

methods: {
  ...mapMutations([
    'chgCurCity'
  ]),
},
created() {
   this.chgCurCity({cityName:'发送',quName:'sd '});
   var that = this;
   console.log(this.curCity);
}

this.$store.dispatch('increment')

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

namespaced: true实现命名空间的独立
使用： 在 …mapActions的第一个参数中加入模块的名称

  ...mapState({
     a: state => state.b,
   }),
  methods: {
   ...mapActions('b', [
    'increment'
  ])
  },
  created() {
    this.increment()
  }