vuex上手

发表于 更新于 分类于 ，

了解 vuex 的特性，写了个 demo，本文示例

1 核心概念

  • modules 模块
    • state 状态
    • getters 获取状态属性
    • mutations 改变状态（同步）
    • acitons 改变状态（异步）

2 示例代码

2.1 CDN 方式引入 vue、vuex

  • 外国 cdn

    • https://unpkg.com/vue

    • https://unpkg.com/vuex

  • gitee 博客托管：

    • https://koalamini.gitee.io/library/vue.min.js
    • https://koalamini.gitee.io/library/vuex.js
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

2.2 vuex 示例

<script type="text/javascript">
  const modulesA = {
    // 命名空间
    namespaced: true,
    // 状态
    state: () => ({
      todos: [
        {
          id: 1,
          text: "已完成的任务",
          done: true,
        },
        {
          id: 2,
          text: "未完成的任务",
          done: false,
        },
      ],
    }),
    // 获取状态属性
    getters: {
      // 获取完成的任务
      doneTodos: (state) => {
        return state.todos.filter((todo) => todo.done);
      },
      // 获取完成任务的数量
      doneTodosCount: (state, getters) => {
        return getters.doneTodos.length;
      },
      // 根据ID获取任务
      getTodoById: (state) => (id) => {
        return state.todos.find((todo) => todo.id === id);
      },
    },
    // 改变状态（同步）
    mutations: {},
    // 改变状态（异步）
    actions: {},
  };

  const modulesB = {
    namespaced: true,
    state: {
      count: 0,
    },
    // 改变状态（同步）
    mutations: {
      // 计数+1
      increment(state) {
        state.count++;
      },
      // 计数+n，提交载荷
      incrementPayload(state, n) {
        state.count += n;
      },
    },
    // 改变状态（异步）
    actions: {
      incrementAsync(context) {
        setTimeout(() => {
          context.commit("incrementPayload", 10);
          console.log("5秒后，b/count", context.state.count);
        }, 5 * 1000);
      },
    },
  };

  // vuex存储
  const store = new Vuex.Store({
    modules: {
      a: modulesA,
      b: modulesB,
    },
  });

  // 获取状态
  console.log("a/doneTodos", store.getters["a/doneTodos"]);
  // 改变状态
  store.commit("b/increment");
  console.log("b/count", store.state.b.count);

  new Vue({
    el: "#app",
    store: store,
    data: {
      message: "请按【f12】查看控制台",
    },
    methods: {
      // 计数异步增加
      incrementAsync() {
        // vuex派发
        this.$store.dispatch("b/incrementAsync");
      },
    },
    // 挂载后
    mounted() {
      this.incrementAsync();
    },
  });
</script>

运行结果：

  • 通过namespaced控制多模块，通过模块/状态属性名访问相应模块的状态属性
  • 同步改变状态mutations方式，只能通过store实例方法commit修改，直接修改会报Error in callback for watcher "function () { return this._data.$$state }"错误，详情
  • 异步改变状态actions方式，需要通过store实例方法dispatch修改

参考资料