#搭建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)使用

<template> </template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State, Action, Getter, Mutation } from "vuex-class";

@Component({
  components: {}
})
export default class My extends Vue {
  @Action("login")
  actionLogin: any;

  @State("user")
  userState: any;

  @Mutation("setUserInfo")
  setUserInfo: any;

  @Getter("getUserState")
  getUserState: any;

  async mounted() {
    // 调用登录actions
    await this.actionLogin({ username: "longaotian", password: "123456" });
    // 读取user的state
    console.log(this.userState);
    // 用getter读取userState
    console.log(this.getUserState);
    // 用mutation修改部分用户数据,适用于修改完用户数据,更新state
    // this.setUserInfo({
    //   adminName: "张三",
    //   changePassword: 0,
    //   id: 11,
    //   logo: "123",
    //   name: "213",
    //   phone: "123"
    // });
    // 读取user的state
    // console.log(this.userState);
  }
}
</script>