vue 使用 vuex

vue 使用vuex

• 安装
• 定义
• 引入项目
• vue文件中使用

安装

vue项目自带

定义

在store目录新建store.ts

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: '11',
    errMess: new Array<Map<string, any>>(),
    errMes: {},
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    setErrMes(state, errMes1: Map<string, any>) {
      state.errMess.push(errMes1);
      const delayTime = Number(errMes1.get('delayTime'));
      if (delayTime) {
        setTimeout(() => {
          const mes = state.errMess.pop();
        }, delayTime);
      } else {
        setTimeout(() => {
          const mes = state.errMess.pop();
        }, 3000);
      }
    },
  },
  actions: {},
  modules: {},
});

引入项目

main.ts文件引入 store

import Vue from 'vue';
import App from './App.vue';
import '../../registerServiceWorker';
import router from '../../router';
import store from '../../store';


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

vue文件中使用

直接使用state

computed: {
      test() {
        return this.$store.state.token;
      },
      errMes() {
        return this.$store.state.errMess[0];
      },
    },

使用mutations

const errMes = new Map();
      errMes.set('message', '你好！ vuex');
      this.$store.commit('setErrMes', errMes);
      this.init();