Vuex

官方文档

安装 Vuex

如果你使用 Vue CLI 脚手架新建项目，vuex 已经默认安装好了。

yarn add vuex

使用 Vuex

创建入口文件

在 src/store 中创建 index.js文件，内容如下：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
});

使用 modules 和命名空间

在 src/store 中创建 modules 文件夹，创建 order.js 文件，内容如下：

const store = {
  namespaced: true,
  state: {
    orderNo: "20200801-0003",
  },
  mutations: {
    setOrderNo(state, data) {
      state.orderNo = data;
    },
  },
};

export default store;

修改 src/store/index.js 文件，内容如下：

import Vue from "vue";
import Vuex from "vuex";
import order from "./modules/order";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    order,
  },
});

这样就可以根据业务对状态进行拆分管理，开启 namespaced 后可以精确使用 store。

Vuex 持久化

因为 Vuex 状态是存在内存中的，所以当浏览器刷新时，会丢失状态。

为了解决这个问题，我们可以使用 vuex-persistedstate 插件。

安装 vuex-persistedstate

yarn add vuex-persistedstate

使用 vuex-persistedstate

修改 src/store/index.js 文件，内容如下：

import Vue from "vue";
import Vuex from "vuex";
import order from "./modules/order";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    order,
  },
  plugins: [createPersistedState()],
});

页面中使用 Vuex

直接使用

<script>
  export default {
    data() {},
    computed: {
      orderNo() {
        return this.$store.state.order.state.orderNo;
      },
    },
    mounted() {
      this.$store.commit("order/setOrderNo", {});
    },
  };
</script>

使用辅助函数

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

  export default {
    data() {},
    computed: {
      ...mapState("order", ["orderNo"]),
    },
    methods: {
      ...mapMutations("order", ["setOrderNo"]),
    },
  };
</script>

使用命名空间辅助函数

<script>
  import { createNamespacedHelpers } from "vuex";

  const { mapState, mapActions } = createNamespacedHelpers("order");

  export default {
    data() {},
    computed: {
      ...mapState(["orderNo"]),
    },
    methods: {
      ...mapMutations(["setOrderNo"]),
    },
  };
</script>