[JavaScript知识库]【Vuex】Vuex搭建及多组件共享

Vuex是什么

• 概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件(Vue.use(vuex)),对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信.
• Github地址: vuex官方地址

什么时候使用Vuex

• 多个组件依赖于同一状态
• 来自不同组件的行为需要变更同一状态

vuex4版本只支持vue3.0,所以在vue2.0中使用,
需要npm i vuex@3 指定版本

搭建vuex环境

1. 创建文件:

src/store/index.js

//该文件用于创建vuex中最为核心的store
import Vue from "vue";
// 引入vuex
import Vuex from "vuex";
//应用vuex插件
Vue.use(Vuex);

// 准备actions,用于响应组件中的动作
const actions = {};
// 准备mutations,用于操作数据(state)
const mutations = {};
// 准备state,用于存储数据
const state = {};

// 创建并暴露store
export default new Vuex.Store({
  actions: actions,
  mutations: mutations,
  state, //简写形式
});

2. 在main.js中创建vm时传入store配置项

.........
//引入store
import store from './store'
.........
/创建vm
new Vue({
	el:'#app',
	render:h => h(app),
	store
	)}

基本使用:

1. 初始化数据,配置actions,配置mutations,操作文件store.js

//该文件用于创建vuex中最为核心的store
import Vue from "vue";
// 引入vuex
import Vuex from "vuex";
//应用vuex插件
Vue.use(Vuex);

// 准备actions,用于响应组件中的动作
const actions = {
//响应jia
  jia(context, value) {
    context.commit("JIA", value);
  },
};
// 准备mutations,用于操作数据(state)
const mutations = {
//执行jia
  JIA(state, value) {
    state.sum += value;
  },
};
// 准备state,用于存储数据
const state = {
  sum: 0, //当前的和
};
// 创建并暴露store
export default new Vuex.Store({
  actions: actions,
  mutations: mutations,
  state, //简写形式
});

2. 组件中读取vuex中的sum数据:$store.state.sum (模板中写不用加this,js脚本中写需要this.$store.state.sum)
3. 组件中修改vuex中的数据: $store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法名',数据)
4. 若没有网络请求或者其他业务逻辑,组件也可以越过actions,即不写dispatch,直接使用commit

getters的使用:

1. 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工.
2. 在store.js中追加getters配置

........
//准备getters,用于将state中的数据进行加工
const getters = {
  bigSum(state) {
  //要写返回值
    return state.sum * 10;
  },
};
// 创建并暴露store
export default new Vuex.Store({
  .......
  getters,
});
........

3. 在组件中读取数据方法:$store.getters.bigSum

快速生成读取方法和使用方法

利用vuex自带的{mapState,mapGetters,mapMutations,mapActions}来方便快捷的生成代码.
首先在需要的组件文件中引入

import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'

computed: {
    //可以用计算属性实现插值语法的简写
    // 程序员手写的等同于下面的mapState生成,es6写法
    // sum() {
    //   return this.$store.state.sum
    // },
    // school() {
    //   return this.$store.state.school
    // },
    //借助mapState生成计算属性,从state中读取数据.(对象写法
    ...mapState({sum: 'sum', school: 'school'}),

    //借助mapGetters生成计算属性,从state中读取数据.(数组写法
    ...mapGetters(['bigSum']),
    // bigSum() {
    //   return this.$store.getters.bigSum
    // },
  },

methods: {
    // increment() {
    //   this.$store.dispatch('jia', this.n)
    // },
    //借助mapActions生成对应方法,方法中会调用dispatch,联系actions,必须在使用时传递值 increment(n)
    ...mapActions({increment: 'jia'}),
    // decrement() {
    //   this.$store.commit('JIAN', this.n)
    // },
        //借助mapMutations生成对应方法,方法中会调用commit,联系mutations,必须在使用时传递值 decrement(n)
    ...mapMutations({decrement: 'JIAN'}),
    }

mapActions与mapMutations必须在使用时传递值例如:

<button @click = “increment(n)” > + </button>