Vue状态管理(Vuex)

浅谈Vuex

Question:Vuex状态管理跟使用传统全局变量有什么不同之处呢？

Answer：

1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

Question:Vuex有哪几种状态和属性？

1.State:用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

2.Mutations:修改仓库 store中的状态的唯一办法就是通过提交mutations

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方会接受 state作为第一个参数，第二个是自定义传参

我们在提交commit时候，字符串参数increment,就是对应在 mutations中的increment。一般通过方法或钩子触发，例如：

3.Getters:是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等,假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters

在组件中获取{{newCount}}方式：this.$store.getters.newCount

4.Action：用来解决异步流程来改变state数据

Action 通过 store.dispatch 方法触发

如何运用vuex语法糖mapMutations？？

此方法只能写在 methods里面，在其他地方调用即可...mapMutations(['add', 'reduce'])

如何运用辅助函数mapActions？？

如何运用辅助函数mapState？？

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

如何运用辅助函数mapGetters？？

store.js代码

import Vue from "vue";
import Vuex from "vuex";


Vue.use(Vuex);


const store = new Vuex.Store({
  state: {
    storeSalaryList: [
      {
        name: "马云",
        salaryAmount: 1000
      },
      {
        name: "马化腾",
        salaryAmount: 900
      },
      {
        name: "李彦宏",
        salaryAmount: 800
      }
    ]
  },
  getters: {
    doubleSalaryList(state) {
      let newArr = state.storeSalaryList.map(item => {
        return {
          name: item.name,
          salaryAmount: item.salaryAmount * 2 + " " + "$"
        };
      });
      return newArr;
    },
    totalSalary(state) {
      let sum = 0;
      state.storeSalaryList.map(item => {
        sum += item.salaryAmount;
      });
      return sum * 2;
    }
  }
});
export default store;

组件中的代码

<template>
  <div id="salary-list-fisrt">
    <h2>财富榜</h2>
    <ol>
      <li v-for="(salary, index) in myDoubleSalaryGetter"
          :key="index">
        {{salary.name}}的工资是：{{salary.salaryAmount}}
      </li>
    </ol>
    <span>工资总额是：{{myTotalSalary}} $</span>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "salary-list-first",
  computed: {
    ...mapGetters({
      myDoubleSalaryGetter: "doubleSalaryList",
      myTotalSalary: "totalSalary"
    })
  }
};
</script>

Java患者

长按识别二维码关注我们

更多精彩内容可回复关键词

面试 | 项目