vuex总结

---

摘要: vuex 总结 时间: 2020-12-23

---

APP.vue

<template>
  <div>
    <my-addition></my-addition>

    <p>vuex</p>

    <my-subtraction></my-subtraction>
  </div>
</template>

<script>
import Addition from "./components/Addition.vue";
import Subtraction from "./components/Subtraction.vue";

export default {
  data() {
    return {};
  },
  components: {
    "my-addition": Addition,
    "my-subtraction": Subtraction,
  },
};
</script>

main.js

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");

store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  // 只有 mutations 中定义的函数，才有权利修改 state 中的数据
  mutations: {
    add(state) {
      // 不要在 mutations 函数中，执行异步操作
      // setTimeout(() => {
      //   state.count++
      // }, 1000)
      state.count++;
    },
    addN(state, step) {
      state.count += step;
    },
    sub(state) {
      state.count--;
    },
    subN(state, step) {
      state.count -= step;
    },
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        // 在 actions 中，不能直接修改 state 中的数据；
        // 必须通过 context.commit() 触发某个 mutation 才行
        context.commit("add");
      }, 1000);
    },
    addNAsync(context, step) {
      setTimeout(() => {
        context.commit("addN", step);
      }, 1000);
    },
    subAsync(context) {
      setTimeout(() => {
        context.commit("sub");
      }, 1000);
    },
    subNAsync(context, step) {
      setTimeout(() => {
        context.commit("subN", step);
      }, 1000);
    },
  },
  getters: {
    showNum(state) {
      return "当前最新的数量是【" + state.count + "】";
    },
  },
});

Addition.vue

<template>
  <div>
    <!-- <h3>当前最新的count值为：{{$store.state.count}}</h3> -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2">+N</button>
    <button @click="btnHandler3">+1 Async</button>
    <button @click="btnHandler4">+N Async</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    btnHandler1() {
      this.$store.commit("add");
    },
    btnHandler2() {
      // commit 的作用，就是调用 某个 mutation 函数
      this.$store.commit("addN", 3);
    },
    // 异步地让 count 自增 +1
    btnHandler3() {
      // 这里的 dispatch 函数，专门用来触发 action
      this.$store.dispatch("addAsync");
    },
    btnHandler4() {
      this.$store.dispatch("addNAsync", 5);
    },
  },
};
</script>

Subtraction.vue

<template>
  <div>
    <!-- <h3>当前最新的count值为：{{count}}</h3> -->
    <h3>{{ showNum }}</h3>
    <button @click="btnHandler1">-1</button>
    <button @click="subN(3)">-N</button>
    <button @click="subAsync">-1 Async</button>
    <button @click="subNAsync(5)">-N Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    // 据映射为计算属性（state）
    ...mapState(["count"]),
    // 映射为计算属性（getter）
    ...mapGetters(["showNum"]),
  },
  methods: {
    // 获得mapMutations映射的sub、subN函数（mutation）
    ...mapMutations(["sub", "subN"]),
    // 获得mapActions映射的addAsync函数（action）
    ...mapActions(["subAsync", "subNAsync"]),
    btnHandler1() {
      // 调用sub函数完成对数据的操作
      this.sub();
    },
  },
};
</script>

总结

A.state

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

在组件中访问 state 的方式：

1).this.$store.state.全局数据名称  如：this.$store.state.count

2).先按需导入 mapState 函数： import { mapState } from 'vuex'

然后数据映射为计算属性： computed:{ ...mapState(['全局数据名称']) }

B.mutation

mutation 用于修改变更$store 中的数

1).声明
mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

2).使用：方式一

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit('add',10)
  }
}

3).使用：方式二
import { mapMutations } from 'vuex'

methods:{
  ...mapMutations(['add'])
}

C.action

在 mutations 中不能编写异步的代码，会导致 vue 调试器的显示出错。

在 vuex 中使用 action 来执行异步操作。

3).声明
actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

2).使用：方式一
<button @click="AddAsync">...+1</button>

methods:{
  AddAsync(){
    this.$store.dispatch('addAsync',5)
  }
}

3).使用：方式二
import { mapActions } from 'vuex'

methods:{
  ...mapMutations(['subAsync'])
}

D.getter

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

它只会包装 store 中保存的数据，并不会修改 store 中保存的数据，当 store 中的数据发生变化时，getter 生成的内容也会随之变化

2).声明
export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

2).使用：方式一
{{$store.getters.showNum}}

3).使用：方式二
import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

E.namespaced

export default {
  // namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
  namespaced: true,
  state,
  mutations,
  actions,
};

使用模块中的 mutations、getters、actions 时候要加上模块名。

格式：模块名/模块中的 mutations

例如：使用 commint 执行 mutations。（settings.js 模块中 changeSetting 方法）

this.$store.commit('settings/changeSetting',userInfo)

获取 state 属性时加上模块名

格式：store.state.模块名.模块属性

例如：获取 state 属性。

$store.state.userInfo.userName