After the project is set up, can it be coded? Wait, wait, wait, wait, wait, wait, wait, wait. Shouldn’t we design something first? Like the function of blog?

Your blog design

Do a simple personal blog first, because it is a personal version, so you can omit registration, login these functions, table structure can also be a little simpler. Basic functions: add blog, display blog, blog list + query + paging, discussion list and add discussion. Although the function is a little weak, but sparrow is small five viscera, vite2 and vue3 basic usage can also reflect some.

Functional design

Should I make it a little more obvious?

Code design

The model design

The model code

Let’s start with the model code. /src/model/blogModel.js

/** **@returns All attributes of a blog post */
export const blog = () = > {
  return {
    // id: 0,
    title: ' '.// This is a blog title
    groupId: 0./ / group ID
    addTime: new Date(), // Add time
    introduction: ' '.// This is the introduction of the blog
    concent: ' '.// Here are the details of the blog
    state: 1.// 1: draft; 2. release. 3: remove
    viewCount: 0./ / views
    agreeCount: 0.// The number of likes
    discussCount: 0 // Discuss quantity}}/** * the form is used to bind the form. * * title: Article title *@returns Add the attributes */ required by the blog post
 export const blogForm = () = > {
  return {
    // id: new Date().valueOf(),
    title: ' '.// This is a blog title
    addTime: new Date(), // Add time
    introduction: ' '.// This is the introduction of the blog
    concent: ' '.// Here are the details of the blog
    state: 1 // 1: draft; 2. release. 3: remove}}/** ** ** ** ** ** ** ** ** ** ** ** ** ** ** *@returns List of posts */
 export const blogList = () = > {
  return {
    id: 0.title: ' '.// This is a blog title
    addTime: ' '.// Add time
    introduction: ' '.// This is the introduction of the blog
    viewCount: 0./ / views
    agreeCount: 0.// The number of likes
    discussCount: 0 // Discuss quantity}}/** ** edit the list of posts *@returns Article title list */
 export const articleList = () = > {
  return {
    id: 0.title: ' '.// This is a blog title
    addTime: ' '.// Add time
    viewCount: 0./ / views
    agreeCount: 0.// The number of likes
    discussCount: 0 // Discuss quantity}}/** ** create table *@returns Discussion list * /
 export const discuss = () = > { 
  return {
    // id: 0,
    blogId: 0.discusser: ' ' , / / nickname
    addTime: new Date(), / / time
    concent: ' './ / content
    agreeCount: 0}}/ * * *@returns Model */ for discussion
export const discussList = () = > { 
  return {
    id: 0.discusser: ' ' , / / nickname
    addTime: ' './ / time
    concent: ' './ / content
    agreeCount: 0}}Copy the code

Native JS does not need to define the object first, but I feel that the need to put the object together centralized management, or more convenient, although this is not useful, because it is not TS, there is no mandatory and no inspection mechanism, but still want to centralized management.

The state of design

State is simply the data shared by multiple components.

/src/model/blogState.js

import { inject } from "vue"

export const blogState = {
  currentGroupId: 0.// Select the group ID. 0: No choice
  currentArticleId: 0.// Select the ID of the article.
  editArticleId: 0.// The ID of the current modified article
  findQuery: {},// Query conditions
  page: { // Paging parameters
    pageTotal: 100.pageSize: 2.pageIndex: 1.orderBy: { id: false}},isReloadDiussList: false
}

/** * State management ** Get state ** Sets currently selected groups ** Sets currently selected articles ** Sets currently edited articles */
export default function blogStateManage() {
  // Get the state first, otherwise it can't be read inside function.
  const state = inject('blogState')

  // Get the state from the child component
  const getBlogState = (id) = > {
    return state 
  }

  // Sets the currently selected group
  const setCurrentGroupId = (id) = > {
    state.currentGroupId = id
  }

  // Sets the currently edited article
  const setEditArticleId = (id) = > {
    state.editArticleId = id
  }

  // Set the discussion list to update
  const setReloadDiussList = () = >{ state.isReloadDiussList = ! state.isReloadDiussList }return {
    setReloadDiussList, // Set the discussion list to update
    getBlogState, // Get the status
    setEditArticleId, // Sets the currently edited article
    setCurrentGroupId // Sets the currently selected group}}Copy the code

It is a simple state management bar, first define the required state, inject the state in main, then use inject state, then write a few set state function, basically can be done.

In the future, I want to write it as a plug-in. Of course, I will improve some functions and not be so thin.

Vuex felt a little too heavy and didn’t need that much functionality, so I implemented a simple one myself.

To continue, more exciting.

The source code

Gitee.com/naturefw/vu…

The online demo

naturefw.gitee.io/vue3-blog