这是我参与11月更文挑战的第五天，活动详情请查看：2021最后一次更文挑战

核心概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 Vuex中的主要的核心概念有：State、Mutation、Action、Getter

state

提供公共数据源，所有的共享数据都要统一的放到store的state中进行存储。

const store=new Vuex.store（{
  state：{},  //存放全局公用数据
  mutations：{},//变更store中的数据
  action:{}    //处理异步任务
}）

组件中使用state的数据：

方式一： this.$store.state.全局数据名称。

方式二：

//1.从vuex中导入mapstate     import {Mapstate}  from 'vuex';
//2.在本页中映射为当前数据的计算属性：
<stripe>
 import {Mapstate}  from 'vuex';
computed{
  ...mapstate(['全局数据名称'])
}
</stripe>

mutation

变更store中的数据（不能操作store中的数据），集中监控所有的数据变化。

<stripe>
  const store=new Vuex.store（{
  state：{},  //存放全局公用数据
  mutations：{   //变更store中的数据
    //Mutation里的提供方法
    add(state){
      //变更状态
      state.count++
    }
  },
  action:{}
}）
</stripe>

调用mutation这数据：this.$store.commit('方法名')

<stripe>
  methods{
    hander(){
      //commit作用————触发mutation的调用方法
      this.$store.commit('add');
    }
  }
</stripe>

传参情况

<stripe>
  const store=new Vuex.store（{
  state：{},  //存放全局公用数据
  mutations：{   //变更store中的数据
    //Mutation里的提供方法
    add1(state，step){
      //变更状态
      state.count++
    }
  },
  action:{}
}）
</stripe>

// 在组建中的methods调用
<stripe>
  methods{
    hander(){
      //触发mutation的调用方法
      this.$store.commit('add1'，3);//数字3为mutation里的step函数
    }
  }
</stripe>

注： mutation函数不能执行异步操作；

action

处理异步任务；通过异步操作变更数据，必须通过Action，不使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。

<stripe>
  const store=new Vuex.store（{
  state：{},  //存放全局公用数据
  mutations：{   //变更store中的数据
    //Mutation里的提供方法
    add1(state，step){
      //变更状态
      state.count++
    }
  },
    action:{  //处理异步数据
      add1sync（context）{
        setTimeout{()=>{
          context.commit('add1')
        },1000}   //一秒之后再回调函数。
      }
    }
}）
</stripe>

注：在Action中，不能直接修改state中的数据，需要通过context.commit（）触发某个mutation里的数据才行。

触发action的方式：

1）、this.$store.dispatch('action里的方法名')

<stripe>
  methods{
    hander(){
      //触发action的调用方法
      this.$store.dispatch('add1');
    }
  }
</stripe>

2）、import 的方式

//1.从vuex中导入mapActions函数    import {Mapstate}  from 'vuex';
//2.通过导入的mapActions函数，映射为当前组件的methods方法
<stripe>
 import {mapAction}  from 'vuex';
methods{
  ...mapAction(['mutation里的方法','action里的方法'])
}
</stripe>

触发Action的异步携带参数：this.$store.dispatch('action里的方法名'，step)


<stripe>
  const store=new Vuex.store（{
  state：{},  //存放全局公用数据
  mutations：{   //变更store中的数据
    //Mutation里的提供方法
    addn(state，step){
      //变更状态
      state.count++
    }
  },
    action:{  //处理异步数据
      addnsync（context,step）{
        setTimeout{()=>{
          context.commit('addn',step)
        },1000}   //一秒之后再回调函数。
      }
    }
}）
</stripe>

getter

用于对store中的数据进行加工处理形成的新数据。

特点:

Getter用于对Store中已有的数据加工处理之后形成新的数据，类似于Vue的计算属性。
Store中的数据发生变化，Getter的数据也随之会发生变化。

const store=new Vuex.store（{
  state：{},  //存放全局公用数据
  
  mutations：{},//变更store中的数据
  
  actions:{}    //处理异步任务
  
  getters:{    //对store中的数据加工处理
  //不会修改state中的数据，只进行包装修饰getter中的数据
    ShowNum:state=>{
      return 返回的数据值。。。
    }
  }
}）

使用方式

1）、this.$store.getters.名称

2）、在计算属性中调用

<stripe>
  import {mapGetters} from 'vuex';   //仅仅是将store中的getter映射成局部的计算属性。

computed:{
  ...mapGetters{['ShowNum']}
}
</stripe>

vuex 总结笔记（详细直观的弄懂vuex）