Vuex 详解

state:

import { Module, VuexModule } from 'vuex-module-decorators'
 
@Module
export default class Vehicle extends VuexModule {
  wheels = 2
}
 
等同于下面的代码
 
export default {
  state: { wheels: 2 }
}

getter:

import { Module, VuexModule } from 'vuex-module-decorators'
 
@Module
export default class Vehicle extends VuexModule {
  wheels = 2
  get axles() {
    return this.wheels / 2
  }
}
 
等同于下面的代码
 
export default {
  state: { wheels: 2 },
  getters: {
    axles: (state) => state.wheels / 2
  }
}

@ Mutations:

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'
 
@Module
export default class Vehicle extends VuexModule {
  wheels = 2
 
  @Mutation
  puncture(n: number) {
    this.wheels = this.wheels - n
  }
}
 
等同于下面的代码
 
export default {
  state: { wheels: 2 },
  mutations: {
    puncture: (state, payload) => {
      state.wheels = state.wheels - payload
    }
  }
}

@Action:

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
import { get } from 'request'
 
@Module
export default class Vehicle extends VuexModule {
  wheels = 2
 
  @Mutation
  addWheel(n: number) {
    this.wheels = this.wheels + n
  }
 
  @Action
  async fetchNewWheels(wheelStore: string) {
    const wheels = await get(wheelStore)
    this.context.commit('addWheel', wheels)
  }
}
 
等同于下面的代码
 
const request = require('request')
export default {
  state: { wheels: 2 },
  mutations: {
    addWheel: (state, payload) => {
      state.wheels = state.wheels + payload
    }
  },
  actions: {
    fetchNewWheels: async (context, payload) => {
      const wheels = await request.get(payload)
      context.commit('addWheel', wheels)
    }
  }
}

@MutationAction:

export default class PassengerStore extends VuexModule {
  public username = '';
  public password = '';
 
  //'username'和'password'被返回的对象替换，
  //格式必须为`{username：...，password：...}` 
  @MutationAction({ mutate: ['username', 'password'] })
  async setPassenger(name: string) {
    const response: any = await request(name); // 接口返回 [{name:'张三',password:'123456'}]
    // 此处返回值必须和上面mutate后面的名称保持一致;
    return {
      username: response[0].name,
      password: response[0].password,
    };
  }
}
 
 
// index.vue中使用
<template>
    <div class="">
        用户名:{{PassengerStoreModule.username}}<br/>
        密码:{{PassengerStoreModule.password}}<br/>
        <button @click="getPassenger()">getPassenger</button>
    </div>
</template>
 
...
@Component
export default class IndexPage extends Vue {
    private PassengerStoreModule: any = PassengerStoreModule;
 
    getPassenger() {
        PassengerStoreModule.setPassenger('西施');
    }
}
 
// 运行过后,点击getPassenger按钮,用户名和密码会发生变化哦

@ 动态模块

动态模块：使用getModule获取数据，页面调用的时候，store.state里面才会显示改模块的信息
非动态模块：页面初始的时候，手动添加到new Vuex.Store({ modules: { user: PassengerStore } }),页面刷新state里面可以直接看到当前模块的变量以及方法。

我们将上面的passenger.ts改写才非动态模块

import {Module,VuexModule,Mutation,Action,getModule,} from 'vuex-module-decorators';
// import store from '@/store'; // 去掉store
 
type User = { username: string; password: string; }
 
@Module({name: 'user', namespaced: true,})
export default class PassengerStore extends VuexModule {
  // ...同上方案例一模一样
}
 
// 因为getModule是要对应store的.上面去掉了store,所以也要去掉 getModule,
// export const PassengerStoreModule = getModule(PassengerStore); 
 
// store/index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import PassengerStore from './modules/passenger';
 
Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
        user: PassengerStore
    },
});
 
//index.vue 使用
import PassengerStore from '@/store/modules/passenger';
import { getModule } from 'vuex-module-decorators';
 
...
created() {
  const PassengerStoreModule = getModule(PassengerStore, this.$store);
 
  console.log(PassengerStoreModule.loginInfo);
  PassengerStoreModule.getZhangsan();
  PassengerStoreModule.getLisi();
  console.log(PassengerStoreModule.userNumber);
  }
...

再试运行,发现跟之前的结果没差别.

命名空间

const moduleA1 = {
    namespaced: true,
    ...
};
const moduleA = {
    namespaced: true,
    modules: {
        a1: moduleA1,
    },
};
const moduleB = {
    // no namespaced
    ...
  };
export default new Vuex.Store({
    ...
    modules: {
        a: moduleA,
        b: moduleB,
    },
});

上面的例子,store包含了两个模块,a和b,a模块里面包含了a1,
打个比方a,a1和b的actions里面分别有个getMsgA(),getMsgB(),getMsgA1()方法,
在页面上用this.$store.dispatch调用这些方法.
a和a1都有命名空间,所以
this.$store.dispatch('a/getMsgA');
this.$store.dispatch('a/a1/getMsgA1');
由于b没有命名空间,所以this.$store.dispatch('b/getMsgB');是会报错的.

那么如果再a1里面如果查看root的state呢,vux提供了rootState, rootGetters.

actions: {
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'a/someGetter'
        rootGetters.someGetter // -> 'someGetter'
 
        dispatch('someOtherAction') // -> 'a/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
 
        commit('someMutation') // -> 'a/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      }