Vuex

Vuex 用于管理各个组件之间的共享变量、事件等

安装

npm install vuex --save

目录结构

├─ store
│  ├─ actions.js
│  ├─ getters.js
│  └─ index.js
│  └─ mutations.js
├── modules
│  └─ moduleA.js

main.js

import mutations from "./mutations";
import getters from "./getters";
import actions from "./actions";
import moduleA from "./modules/moduleA";

const state = {
  counter: 0,
};

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

getters.js、actions.js、moduleA.js

export default {};

设置共享变量

\store\index.js

export default new Vuex.Store({
  state: {
    变量名: 值,
  },
});

使用共享变量

$store.state.变量名

mutations 方法（修改共享变量）

\store\index.js

export default new Vuex.Store({
  mutations: {
    方法名(state) {
      state.变量名 = 0;
    },
    方法名(state, 参数名) {
      state.变量名 = 0;
    },
  },
});

使用 mutations 方法：

this.$store.commit("方法名");
this.$store.commit("方法名", 参数名);
//传递多个参数
const test = { id: 01, name: "a", age: 18 };
this.$store.commit("方法名", test);

提示

不推荐使用 $store.state.变量名 = XXX 修改变量，跳过了很多流程

actions 方法（类似 mutations 方法）

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

使用 actions 方法：

this.$store.dispatch("方法名");

提示

• Action 提交的是 Mutation，不能够直接修改 state 中的状态，而 Mutations 是可以直接修改 state 中状态的
• Action 是支持异步操作的，而 Mutations 只能是同步操作

mapGetters 辅助函数

将 store 中的 actions 方法 映射到局部方法

import { mapActions } from "vuex";

export default {
  methods: {
    ...mapActions(["actions方法名", "actions方法名"]),
  },
};

使用：

this.actions方法名()
this.actions方法名(参数1,参数2)

getter 方法（类似计算属性）

\store\index.js

export default new Vuex.Store({
  getters: {
      计算属性名(state){
          return state.变量名
      },
      计算属性名(state){
          return function(参数1[,参数2]){
              return state.变量名 + 参数1
        }
      },
  }
})

使用 getter 方法：

{
  {
    $store.getters.计算属性名;
  }
}
{
  {
    $store.getters.计算属性名(1);
  }
}

mapGetters 辅助函数

将 store 中的 getter 映射到局部计算属性

import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["计算属性名", "计算属性名"]),
  },
};

使用：

this.计算属性名

Vue-modueles

\store\index.js

//创建对象
const 模块对象名称 = {
  state: {},
  mutations: {},
  getters: {},
  actions: {},
};
//声明模块
export default new Vuex.Store({
  modules: {
    模块名称: 模块对象名称,
  },
});

使用 modules：

{
  {
    $store.state.模块名称.name;
  }
}

提示

mutations、getters 可以常规使用

事件总线

事件总线用来共享事件（如子组件向祖父组件发送事件）

main.js

Vue.prototype.$bus = new Vue();

发射事件

this.$bus.$emit("事件名称");

接收事件

this.$bus.$on("事件名称", 回调函数([参数]));