Vue -Ts入门 Vuex (二)

接着上文 Vue -Ts入门 (一)

本人也是第一次写，所以若有所出处，欢迎指正。

准备工作

按照个人项目实际情况

npm i vuex -S
npm i vuex-class -S
           

文件夹目录

main.ts

import Vue from "vue";
import Test1 from "./views/Test1.vue";
+ import store from "./store"

Vue.config.productionTip = false;

new Vue({
+   store,
  render: h => h(Test1)
}).$mount("#app");

           

项目启动

一、state

store/index.ts

import Vue from "vue";
import Vuex, { StoreOptions } from "vuex"; // StoreOptions 接口 参数 泛型 
import { RootState } from "./types";

Vue.use(Vuex);

const store: StoreOptions<RootState> = {
    state: {
        version: '1.0.0', // a simple property
        coder: 'Posden',
    },
};
export default new Vuex.Store<RootState>(store);
           

PS: 定义接口什么的，编辑器可以点击查看

store/types.ts

// 注意一下，可选或者必选选项 不然检测会报错
export interface RootState { // 定义的接口要跟根store 中 state 一致，上面截图可反映，泛型传递在state上
  version: string;
  coder: string;
}
           

Test1.vue

<template>
+	 <div>coder:{{ coder }}</div>
+    <div>版本号：{{ version }}</div>	
</template>

<script>
import { State } from "vuex-class";
import { RootState} from "../store/types";
export default class Test1 extends Vue {
+  @State version! :RootState
+  @State coder! :RootState
	// ......
}
</script>
           

已下内容在一个module

profile

演示

二、module - state

module 文件准备

store/index.ts

import Vue from "vue";
import Vuex, { StoreOptions } from "vuex";
import { RootState } from "./types";
+ import { profile } from "./profile/index";

Vue.use(Vuex);

const store: StoreOptions<RootState> = {
    state: {
        version: '1.0.0', // a simple property
        coder: 'yp',
    },
+    modules: {
+        profile
+    }
};
export default new Vuex.Store<RootState>(store);
           

profile/index.ts

import { Module } from "vuex"; // module 校验规则
import { ProfileState ,RootState } from "../types"; // 根state 当前profile State 检测
export const state: ProfileState = {
    user: {firstName:"我的姓氏"},
};
const namespaced: boolean = true;
export const profile: Module<ProfileState, RootState> = {
    namespaced,
    state,
};
           

store/types.ts

// 注意一下，可选或者必选选项 不然检测会报错
export interface RootState {
  version: string;
  coder: string;
}
+export interface ProfileState {
+  user?: User;
+  error?: Boolean
+}
+export interface User {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  phone?: string;
+}

           

Test1.vue

<template>
+	 <div>姓:{{profile.user.firstName}}</div>
</template>

<script>
import { State } from "vuex-class";
import { ProfileState,RootState} from "../store/types";
export default class Test1 extends Vue {
+  @State("profile") profile!: ProfileState; // 第一个profile 命名空间 第二个是赋值的参数（可重写，template 引用的）
	// 如果一样 可以简写  @State profile!: ProfileState;
	// ......
}
</script>
           

二、moudle - getters

profile/index.ts

import { Module } from "vuex"; // 校验规则
+ import { getters } from "./getters";
import { ProfileState ,RootState } from "../types";

export const state: ProfileState = {
    user: {firstName:"我的姓氏"},
};
const namespaced: boolean = true;
export const profile: Module<ProfileState, RootState> = {
    namespaced,
    state,
+    getters,
};
           

profile/getters.ts

import { GetterTree } from "vuex"; // 校验规则
import { ProfileState , RootState } from "../types";

export const getters: GetterTree<ProfileState, RootState> = {
    fullName(state): string {
        const { user } = state;
        const firstName = (user && user.firstName) || '';
        const lastName = (user && user.lastName) || '你的名'; // 没有初始值 会取到‘你的命’
        return `${firstName} ${lastName}`;
    }
};
           

Test1.vue

再换个写法，关于命名空间，获取其中某个属性

<template>
+	 <div>{{ fullName }}</div>
</template>

<script>
import { State, Getter } from "vuex-class";
import { ProfileState,RootState} from "../store/types";

const namespace = "profile"

export default class Test1 extends Vue {
+    @Getter('fullName', { namespace }) fullName !: string;
	// ......
}
</script>
           

二、moudle - action / mutations

store/types.ts

export interface ProfileState {
+  book?: object;
  user?: User;
  error?: Boolean
}
           

profile/index.ts

import { Module } from "vuex";
import { getters } from "./getters";
+ import { actions } from "./actions";
+ import { mutations } from "./mutations";
import { ProfileState ,RootState } from "../types";

export const state: ProfileState = {
    user: {firstName:"我的姓氏"},
+    book:{}
};
const namespaced: boolean = true;
export const profile: Module<ProfileState, RootState> = {
    namespaced,
    state,
    getters,
+    actions,
+    mutations
};
           

profile./actions.ts

import { ActionTree } from "vuex"; // 校验规则
import axios from "axios";
import { ProfileState, RootState } from "../types";

export const actions: ActionTree<ProfileState, RootState> = {
    fetchData({ commit }): any {
        axios({
            url: 'https://www.xxxx.com/api/book/bookList/findBybookCate?Pcid=5d74bc4b8e42ee0f2887c36e&cid=5d3d0506e1d8c632cc000862&pagesize=8&page=1'
        }).then((response) => {
            const payload: any = response && response.data && response.data.item;
            commit('profileLoaded', payload);
        });
    }
};

           

profile/mutations.ts

import { MutationTree } from "vuex";
import { ProfileState } from "../types";

export const mutations: MutationTree<ProfileState> = {
    profileLoaded(state, payload) {
        state.error = false;
        state.book = payload;
    },
};

           

Test1.ts

<template>
...
    <ul>
      <li v-for="(item,index) in book" :key="index">
        <img :src="item.bookImg" alt="">
        <div>{{ item.bookName}}</div>
        <div>{{ item.bookAuthor}}</div>
        <div>¥{{ item.bookPrice}}</div>
      </li>
    </ul>
...
</template>
<script>
import { State, Action, Getter } from "vuex-class";

  @State('book', { namespace }) book !: object;
  @Action('fetchData', { namespace }) fetchData: any


  mounted() {
    this.fetchData()
  }
</script>
           

当然你也可以不在

store/index

注册module,异步按需加载

public beforeCreate(){
    this.$store.registerModule('profile',profile)
  }
  public beforeDestroy() {
    this.$store.unregisterModule('profile')
  }
           

至此，一个vuex-ts 入门完工。如果对你觉得不错、点个赞呗。