VUEX的使用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

vuex是一个全局状态管理库，但是我认为没有那么复杂，，简单来说，他就相当于是银行一样，不论你在哪里存了钱，这个钱，也不论在哪里使用了，那么就都会被改变。

首先我们去安装vuex npm install vuex or yarn add vuex

然后在main.js中绑定使用vuex插件

一直在使用vuex，但始终感觉自己在滥用，看了官方文档，做了一些总结吧

数据的变更

尽管可以利用数据响应式的特点直接变更数据，但这样的做法在大型项目中会遇到问题。

以前使用vuex改变数据我们经常会 this.$store.state.xxx， 虽然vuex允许我们这样做但是这样不符合会产生一系列的文问题：

如果某一天你发现某个共享数据是错误的，而有一百多个组件可能都变更过这个数据，你该如何判定是那个组件改变了这个数据？

所以为了能更好的跟踪数据的变化，vuex强烈建议使用mutation来更改数据

 例： export default new Vuex.Store({
   state:{
    sum:'123'
   }
   mutations: {
    // 定义sum一个加一的方法
    increase(state) {
        state.sum++;
    },
    // 定义sum一个减一方法
    reduce(state) {
        state.sum--;
    }
   }
  }) 

• 使用方法： this.$store.commit("increase") //第一个参数写方法，第二个参数写负荷，也就是方法里面除state传递的参数
• 注意：
  1. mutation 不得有异步操作
  2. 提交mutation是改变数据的唯一原因

这样我们只需要修改这个方法完全不需要管是谁操作了他，或者说我们不需要一个一个页面去找修改他的方法或代码了

因为mutation是不允许使用异步，所以出现了cations

actions 专门用来处理异步请求

• actons的用法基本上和mutations是一样的，只不过这个对象是专门用来处理异步的

  例子：
  actions:{
    asynclus(ctx){
       settimeout(()=>{
         ctx.commit("increase")
       },1000)
    }
  }