Vuex使用

2021-01-02

Vuex使用

Vuex是一个状态管理库，使用单一状态树管理应用内的全局状态。

index.js文件如下：

import Vue from "vue";
import Vuex from "vuex";
import cart from "./cart"
Vue.use(Vuex);

const store = new Vuex.Store({
  //全局的state
  // 如何调用：this.$store.state.状态名 / this.$store.state.模块名.状态名
  state: {
    isTabbarShow: true,
    itemList: [],
  },
  mutations: {
    //修改state操作，state为第一个参数，vue会自动注入该函数
    //如何调用：this.$store.commit("函数名",[data])
    HideTabbar(state, data) {
      state.isTabbarShow = data;
    },
    ShowTabbar(state, data) {
      state.isTabbarShow = data;
    },
  },
  actions: {
    //主要执行异步操作,
    // 如何调用：this.$store.dispatch("模块名/函数名称",[data])
    test(store, data) {
      //使用commit通过mutation中方法修改state
      store.commit("", data);
    },
  },
  getters: {
    // store中的计算属性
    // 调用方式 $store.getters."函数名字"
    getItemListTop3(state) {
      return state.itemList.slice(0, 3);
    },
  },
  modules: {
    //不同模块中可以定义state、mutations、actions，然后包装成一个对象导出，在这儿进行导入，注意在子模块中不需要使用Vuex.Store构造函数。
      cart,
  },
});

export default store;

cart/index.js

const state = {
  items: [1, 2, 3, 4, 5, 6, 7],
};
const getters = {
  getOddItem(state) {
    return state.items.filter((x) => x % 2 == 0);
  },
};
const mutations = {
  incre(state) {
    state.items = state.items.map((x) => x + 2);
  },
};
export default {//开启了命名空间
  namespaced: true,
  state,
  getters,
  mutations,
};

在main.js中：

import store from "@/store";

Vue.config.productionTip = false;

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

注意：

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

即不论是在那个模块定义的，都可以使用this.$store.getters.名字进行调用。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。即：

1
2
3

$store.getters["cart/getOddItem"]
$store.dispatch('cart/login')
$store.commit('cart/incre)

可以看到，在vuex中，只允许mutation操作修改state，构成单向数据流。示意图如下：

补充：

vue中计算属性（computed）和方法（methods）的区别：

计算属性以方法形式定义，使用时使用属性的方式进行调用；计算属性只会计算一次，结果缓存在内存中，当其相关联的数据发生改变时才会重新计算。而方法调用一次就会被执行一次。当有关数据处理逻辑较为复杂，或页面中需要多处使用时可以使用计算属性。