項目搭建好了之后是不是可以編碼了呢？
等等不要着急，我們是不是應該先設計一下？比如博客的功能等？
博客設計
先做個簡單的個人博客，因為是個人版，所以可以省略注冊、登錄這些功能，表結構也可以簡單一點。
基礎功能：添加博文、顯示博文、博文列表+查詢+分頁、討論列表和添加討論。
雖然功能弱了一點，但是麻雀雖小五臟俱全，vite2 和 vue3 的基礎用法也可以體現一些。
功能設計
是不是做成圖更明顯一些？
代碼設計
model設計
model代碼
先來看看 model 的代碼。
/src/model/blogModel.js
/**
* 顯示博文用，建表用
* @returns 博文的全部的屬性
*/
export const blog = () => {
return {
// id: 0,
title: '', // 這是一個博客標題
groupId: 0, // 分組ID
addTime: new Date(), // 添加時間
introduction: '', // 這是博客的簡介
concent: '', // 這是博客的詳細內容
state: 1, // 1：草稿；2：發布；3：刪除
viewCount: 0, // 瀏覽量
agreeCount: 0, // 點贊數量
discussCount: 0 // 討論數量
}
}
/**
* 表單用的博文，綁定表單用。
* * title：文章標題
* @returns 添加博文需要的屬性
*/
export const blogForm = () => {
return {
// id: new Date().valueOf(),
title: '', // 這是一個博客標題
addTime: new Date(), // 添加時間
introduction: '', // 這是博客的簡介
concent: '', // 這是博客的詳細內容
state: 1 // 1：草稿；2：發布；3：刪除
}
}
/**
* 首頁用的博文列表，按需設置字段
* @returns 博文列表
*/
export const blogList = () => {
return {
id: 0,
title: '', // 這是一個博客標題
addTime: '', // 添加時間
introduction: '', // 這是博客的簡介
viewCount: 0, // 瀏覽量
agreeCount: 0, // 點贊數量
discussCount: 0 // 討論數量
}
}
/**
* 編輯博文用的列表
* @returns 文章標題列表
*/
export const articleList = () => {
return {
id: 0,
title: '', // 這是一個博客標題
addTime: '', // 添加時間
viewCount: 0, // 瀏覽量
agreeCount: 0, // 點贊數量
discussCount: 0 // 討論數量
}
}
/**
* 建表用的討論
* @returns 討論表
*/
export const discuss = () => {
return {
// id: 0,
blogId: 0,
discusser: '' , // 昵稱
addTime: new Date(), // 時間
concent: '', // 內容
agreeCount: 0
}
}
/**
* @returns 討論的model
*/
export const discussList = () => {
return {
id: 0,
discusser: '' , // 昵稱
addTime: '', // 時間
concent: '', // 內容
agreeCount: 0
}
}
原生js是不需要先定義對象的，只是我感覺把需要的對象放在一起集中管理一下，還是比較方便的，雖然這么做用處不大，因為不是ts，沒有任何強制性也沒有檢查機制，但是還是想集中管理一下。
狀態設計
狀態嘛，簡單地說就是多個組件共享的數據，當然這么說不夠嚴謹。
/src/model/blogState.js
import { inject } from "vue"
export const blogState = {
currentGroupId: 0, // 選擇的分組ID。0：沒選擇
currentArticleId: 0, // 選擇的文章ID。
editArticleId: 0, // 當前修改的文章ID
findQuery: { }, // 查詢條件
page: { // 分頁參數
pageTotal: 100,
pageSize: 2,
pageIndex: 1,
orderBy: { id: false }
},
isReloadDiussList: false
}
/**
* 狀態的管理
* * 獲取狀態
* * 設置當前選擇的分組
* * 設置當前選擇的文章
* * 設置當前編輯的文章
*/
export default function blogStateManage() {
// 先把狀態取出來，否則在 function 里面無法讀取。
const state = inject('blogState')
// 子組件里面獲取狀態
const getBlogState = (id) => {
return state
}
// 設置當前選擇的分組
const setCurrentGroupId = (id) => {
state.currentGroupId = id
}
// 設置當前編輯的文章
const setEditArticleId = (id) => {
state.editArticleId = id
}
// 設置更新討論列表
const setReloadDiussList = () => {
state.isReloadDiussList = !state.isReloadDiussList
}
return {
setReloadDiussList, // 設置更新討論列表
getBlogState, // 獲取狀態
setEditArticleId, // 設置當前編輯的文章
setCurrentGroupId // 設置當前選擇的分組
}
}
算是一個簡易的狀態管理吧，先定義一下需要的狀態，在main里面注入狀態，然后用 inject 提取狀態，再寫幾個設置狀態的函數，基本就可以搞定了。
后續想寫成插件的形式，當然會完善一些功能，不會這么單薄。
感覺 Vuex 有點太厚重了，這里也不需要那么強大的功能，所以就自己實現了一個簡單的。
未完待續，后面更精彩。
源碼
https://gitee.com/naturefw/vue3-blog