什么是Vuex

Vuex是专门为Vue.js设计的状态管理库
Vuex采用集中式的方式存储需要共享的状态
Vuex的作用是进行状态管理，解决复杂组件通信，数据共享
Vuex集成到了devtools，提供了time-travel时光旅行历史回滚功能

什么情况下使用Vuex

非必要的情况不要使用Vuex
大型单页应用程序
- 多个视图依赖同一个状态
- 来自不同视图的行为需要变更同一状态
  Vuex核心概念
  Store
  State：状态，保存在store中
  Getter: Vue中的计算属性
  Mutation: 状态变化，需要commit mutation
  Action: 先发异步请求，然后通过Mutation commit状态
  Module: 模块，每个模块都有自己的State/Getter/Mutation/Action

mapState: 获取到state

computed: {
    //...mapState(["count"]),
  ...mapState({num:"count"})
}

getter

new Vuex.store({
    state: {
      count: 0
  },
  getters: {
      reverseCount(state){
        return state.count++;
    }
  }
});
//$store.getters.reverseCount

mapGetters

computed: {
    ...mapGetters(["count"])
}

mutations

mutations:{
    increate(state,payload) {
        state.count += payload
    }
}
//$store.commit("increate",  2)

mapMutations

methods:{
    ...mapMutations(["increate"])
}

actions

increateAsync (context,payload) {
    setTimeout(() => {
      context.commit("increate",payload)
  },2000);
}
//$store.dispatch("increateAsync", 5)

mapActions

methods:{
    ...mapActions(["increateAsync"])
}

modules模块
每个模块都有自己的state/getter/mutations…
还可以给模块添加nameSpaced

Plugin

const myPlugin = store => {
    store.subscribe((mutation, state) => {
      if(mutation.type.startsWith("cart/")) {
        window.localStorage.setItem("cart-products", JSON.stringify(state.cart.cartProducts))
    }
  })
}
new Vuex.store({
    state: {
      count: 0
  },
  plugins: [myPlugin]
});

状态管理

什么是Vuex

什么情况下使用Vuex

Vuex核心概念

Plugin