#搭建Vue+TypeScript项目(三)

vuex的使用

使用vuex-persistedstate持久化存储,你不想一刷新页面,vuex就消失吧,不想就用

`npm i vuex-persistedstate -S`

1.默认localStorage
import vuexPersistedstate from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [vuexPersistedstate()]
})
2.使用sessionStorage(我当然选择这个了)

plugins: [
    vuexPersistedstate({ storage: window.sessionStorage })
]

3.使用cookie

import vuexPersistedstate from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

export default new Vuex.Store({
  // ...
  plugins: [
    vuexPersistedstate({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

模块化使用store

1.在src文件夹下新建store文件夹,新建index.ts

import Vue from 'vue';
import Vuex from 'vuex';
import vuexPersistedstate from 'vuex-persistedstate';
import user from './modules/user';
Vue.use(Vuex);

export default new Vuex.Store({
  modules: { user },
  plugins: [vuexPersistedstate({ storage: window.sessionStorage })]
});

2.在store文件夹下新建modules文件夹,存放模块,新建user.ts

import Vue from 'vue';
import vuex from 'vuex';
import { login } from '@/api/user';
#这是我的接口返回的用户数据,你需要自己配置自己的用户数据结构
const defaultState: any = {
  authorization:'',
  company: {
    adminName: '',
    changePassword: 0,
    id: 1,
    logo:'',
    name: '',
    phone: ''
  }
};
const mutations: any = {
  setUserState(state: any, data: any) {
    state.authorization = data.authorization;
    state.company=data.company
  }
};
const actions: any = {
  async login(state: any, payLoad: any) {
    let data: any = await login(payLoad.username, payLoad.password);
    state.commit('setUserState', data.result);
  }
};
const getters: any = {
  getUserState(state: any) {
    return state;
  }
};
export default { state: defaultState, mutations, actions, getters };

3.在组件中使用

(1)先安装一个插件 vuex-class

npm i vuex-class -S

(2)使用