vuex状态管理

座右铭：越努力越幸运，越运动越健康。
热爱前端技术，热爱运动的这样一个人

---

一、vuex是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化**。

二、状态管理

这个状态自管理应用包含以下几个部分：
state：驱动应用的数据源；
view：以声明方式将 state 映射到视图；
actions：响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意：

三、理解图

四、什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

五、分析vuex各个部分

State

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。

Getter
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Action
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

六、使用vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state = { 
  cartShop: 0,   //购物车数量
  isnavshow: true, //底部导航是否显示
  cartLists:[], //购物车数据
};
const getters = {

};
const mutations = {
  cartShop(state) {
    state.cartShop += 1;
  },
  navshow(state) {
    state.isnavshow = true;
  },
  navhide(state) {
    state.isnavshow = false;
  }
};
const actions = {
  cartShop({ commit }) {
    commit('cartShop');
  },
  navshow({ commit }) {
    commit('navshow');
  },
  navhide({ commit }) {
    commit('navhide');
  },
};

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

在vuex中有传入数据

//order订单组件
 <button @click="del(v)">-</button>
  {{v.count}}
 <button @click="add(v)">+</button>
 
  methods:{
    add(v){
      this.$store.dispatch('CARTCHANGE',{type:'add',...v});
    },
    del(v){
      this.$store.dispatch('CARTCHANGE',{type:'del',...v});
    }
  },
 //vuex处理
 //actions中
  CARTCHANGE({commit},obj){  //添加到购物车
      if(obj.type=='add'){
        commit('CARTCHANGEADD',obj);
      }else {
        commit('CARTCHANGEDEL',obj);
      }
      
},
//mutations中
CARTCHANGEADD(state,data){
      for(var i=0;i<state.cartData.length;i++){
        if(state.cartData[i].product_id == data.product_id){
          state.cartData[i].count+=1;
          return;
        }
      }
  },
  CARTCHANGEDEL(state,data){
    for(var i=0;i<state.cartData.length;i++){
      if(state.cartData[i].product_id == data.product_id){
        state.cartData[i].count-=1;
        return;
      }
    }
}

容易遇到的问题：在组件中传送数据中需要传多个参数，但是actions中只允许俩个参数 所以在传送数据可以参一个对象。

七、vuex中辅助函数

mapGetters

使用情况：在同一个组件中大量使用getters的属性

//使用方法
1.先导入
import {mapGetters } from 'vuex'
2.计算属性中使用（没有其他计算属性）
computed:mapGetters(['getters定义的属性1','getters定义的属性2']),
3.若是在组件中已有计算属性了
computed：{
...mapGetters(['getters定义的属性1','getters定义的属性2']),
num（）{}，
num2（）{}，
}
  

mapActions

使用情况：在同一个组件中大量使用actions的属性

//使用方法
1.先导入
import {mapActions } from 'vuex'
2.方法中使用（没有定义其他方法）
methods:mapActions (['getters定义的属性1','getters定义的属性2']),
3.若是在组件中已有方法了
methods：{
...mapActions (['getters定义的属性1','getters定义的属性2']),
num（）{}，
num2（）{}，

总结

1.在state 中定义全局变量 , 在组件中使用$ store.dispatch(“action中定义的名字”) ,在actions中commit给mutation，让 mutation 是更改state
例如:
某组件拿到vuex的值：$ store.state.count
更改count的值，通过$ store.dispatch（‘changeCount’）
在action中commit 给mutation

2.在vuex中传入数据
3.辅助函数mapGetters、mapActions的使用