vue: vuex getters mutations actions

getters: 可以减少代码量，如果其他组件需要，直接在计算属性return this.$store.getters.doubleCount拿便可。

预算可以从result和anotherRsult组件迁移到index.js文件中。

        import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 100,
  },
  getters: {
 doubleCount(state) {
 return state.count * 2
 // 类似计算属性
      }
  },
  mutations: {
      increaseCount(state) {
          state.count++;
      },
     decreaseCount(state) {
         state.count--;
      }
  }
})

      

原理: getters中的doubleCount监听state中的count数据，然后处理，处理了之后，组件中的计算属性在监听doubleCount，跟着改变。

mutations: 在很多组件中，对同一个变量进行函数操作，加加减减等，容易造成数据混乱，所以vue不允许直接在组件的methods字段中的函数直接进行++--，所以迁来了mutations这里进行操作。

mutations代码已经写在上面的index.js文件中了，这是counter.vue组件

        <template>
    <div>
        <button class="btn btn-primary" @click="increase">加</button>
        <button class="btn btn-primary" @click="deincrease">减</button>
    </div>
</template>
<script>
export default {
    methods: {
        increase() {
            // this.$store.state.count++
            // 只是示范 不能直接改变
            this.$store.commit("increaseCount")
            // 应该这样操作
        },
        deincrease() {
            // this.$store.state.count--
            this.$store.commit("decreaseCount")
        }
    }
}
</script>
      

注意的点: mutations必须是同步的代码，不能写异步的代码，虽然不会报错，但是不允许。执行了mutations里面的代码，数据就必须会改变，但是异步没有立即改变。

mutations可以传值，但是只能传一个形参，传多个使用对象

        // counter.vue组件中的js部分
export default {
    methods: {
        increase() {
            this.$store.commit("increaseCount", 5) // 传值
        },
        deincrease() {
            this.$store.commit("decreaseCount")
        }
    }
}

      

index.js代码

        import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 100,
  },
  getters: {
 doubleCount(state) {
 return state.count * 2
      }
  },
  mutations: {
 increaseCount(state, num) { // 接收值
 state.count += num;
      },
 decreaseCount(state) {
 state.count--;
      }
  }
})

      

actions: 存放异步函数

触发action: this.$store.dispatch

index.js文件

        import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 100,
  },
  getters: {
 doubleCount(state) {
 return state.count * 2
      }
  },
  mutations: {
 increaseCount(state, num) {
 state.count += num;
      },
 decreaseCount(state) {
 state.count--;
      }
  },
  actions: {
      actionsIncrease(context) {
          setTimeout(() => {
              context.commit('increaseCount', 7)
              // 提交执行同步中的increaseCount函数
          }, 1000)
      }
  }
})

      

counter.vue中触发异步函数

        <template>
    <div>
        <button class="btn btn-primary" @click="increase">加</button>
        <button class="btn btn-primary" @click="deincrease">减</button>
    </div>
</template>
<script>
export default {
    methods: {
        increase() {
            this.$store.dispatch("actionsIncrease")
            // 触发异步函数字段
        },
        deincrease() {
        this.$store.commit("decreaseCount")
        }
    }
}
</script>
      

环的工作原理。

vue dev tools工具

是一个浏览器的插件，下载即可使用(不行重启一下浏览器就好了)，是vue开发模式则亮点，不是则熄灭。

写同步就是为了方便看这个时间戳，可以知道是什么时候发生的，什么函数导致改变的

还可以回去定位。追踪bug