vuex 复习这个主要是映射不同写法复习

这个原理到是不难，就是统一的状态管理，和可控的操作预期，更加便于管理和维护

我自己画了个图，大家一看就明白，说白了，就必须这么转，这么转便于维护，再大的项目也这样转，跟太极一样，就这么

转啊转！

今天我要复习的是，getters 这个 我不经常用，所以陌生了，所以写个：

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

Vue.use(Vuex)
let store = new Vuex.Store({
    state: {
        courses: [],
        secret: 'action'
    },
    actions: {

        initCoures({ commit }) {
            console.log("....")
            setTimeout(() => {
                commit("setCoures", ['java', 'node', 'css', 'vue'])
            }, 1000)
        }
    },
    mutations: {
        setCoures(state, courses) {
            state.courses = courses;
        }
    },
    getters: {
        // 计算属性
        cryptoSecret(state) {
            return state.secret.toUpperCase();
        }
    }
})

export default store;

 

Index.vue

<template>
  <div>
    <p>index pager</p>
    <ul>
      <li v-for="(course, index) in courses" :key="index">{{ course }}</li>
    </ul>

    <p>{{ secret }}</p>
    <p>{{ $store.getters.cryptoSecret }}</p>
    <p>{{ cryptoSecret }}</p>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
  methods: {
    ...mapActions(["initCoures"]),
  },
  created() {
    this.initCoures();
  },
  data() {
    return {
      //这里数组，我不想在组件中获取， created ,mounted 方法中获取，我想在路由的级别获取！
      // 这个时候，就用到了路由钩子 beforeRouteEnter beforeRouteUpdate 方法
    };
  },
  computed: {
    ...mapState(["courses", "secret"]),
    ...mapGetters(["cryptoSecret"]),
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
</style>

 

在这篇例子中，由于没有分模块，所以 

mapState mapActions mapMutations mapGetters 的使用写法很简单！

 

下一篇，我们开始分模块写写看