8.11 vuex

vuex状态管理:相当于全局的一个对象，每个组件都可以存取值
使用的情况：当组件的亲缘关系比较远的时候，使用vuex，会非常方便
特点: 刷新数据丢失，但是数据是响应式的

为了方便理解上面的图，我们引入四种身份：用户，产品，开发，代码
用户: 上图的vue Components
产品：Actions
开发：Mutations
代码：State
用户想要修改代码，必须要通知产品，产品觉得合适，在通知开发，然后由开发修改代码（方便数据管理）
store是vuex的实例

<button @click="add">add</button>
methods: {
   add() {
     this.$store.dispatch('ADD')
  }
}

// store/index.js
export default new Vuex.Store({
  state: {
    num:0
   }
   mutations: {
      ADD(state) {
       state.num += 1;
     }
   }
  //相当于methods方法
  actions: {
    ADD({commit,state}) {
       commit('ADD')  
    }
  }
  //相当于computed属性
  getters: {
 
  }
})

辅助属性

1. mapGetters

computed: {
//必须是在getters中的属性，才能映射
 ...mapGetter(['num'])
}

//store/index.js
state: {
   num:0
}
gettter() {
  num(state) {
     return state.num;
  }
}

2. mapActions
   可以减少dispatch这一步，直接能触发actions中的函数

<button @click="ADD"> </button>
methods: {
  ...mapActions(['ADD'])
}
// store/index.js
actions: {
 ADD({commit}) {
   commit('ADD')
 }
}
mutations: {
 ADD(state) {
    state.num += 1;
 }
}
state: {
  num:1
}

注意:vuex传参，只能传递一个参数（多个的时候，将他封装成对象）
mapActions 只适合在触发时逻辑比较简单的时候使用（只需要触发ADD，不需要其他的逻辑处理）