vue小記

使用vue也有一段時間了，現在對vue的一些以前沒有注意到的點小結一番~

本文均採用npm安裝依賴

json-server

資料儲存的利器啊，我之前是採用easy-mock，遺憾的是其只能使用get請求。

在json-server中我們採用npm install -g json-server安裝依賴。

在最外層檔案新建mock檔案，下建db.json

然後採用json格式輸入資料

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
複製程式碼

然後改改script，在package.json中，修改script

    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "node build/dev-server.js",
        "build": "node build/build.js",
        "mock": "json-server mock/db.json --port 9092",
        "mockdev": "npm run mock & npm run dev"
    },
複製程式碼

你可以用npm run dev開啟專案npm run mock開啟json-server,npm run mockdev兩個一起開啟~~

在localhost9092可以看到我們的mock資料，埠地址可以在port後面改

要對資料進行操作，需設定我們的基地址

let baseUrl = `http://localhost:9092`; 
複製程式碼

配合axios使用，即可對資料進行增刪改查

import axios from `axios`
export default async(url = ``, data = {}, type = `GET`, method = `fetch`) => {
	type = type.toUpperCase();
	url = baseUrl + url;

	if (type == `GET`) { // search
		try {
            var res = await axios.get(url)
            return res
        } catch (error) {
            console.error(error)
        }
	} else if(type == `PUT`) { // edit
		try {
            await axios.put(url,data.data)
        } catch (error) {
            console.error(error)
		}
	} else if(type == `POST`) { // add
		try {
			await axios.post(url,data.data)
        } catch (error) {
            console.error(error)
		}
	} else if(type == `DELETE`) { // delete
		try {
            await axios.delete(url,data.data)
        } catch (error) {
            console.error(error)
		}
	}
}
複製程式碼

比如我們要對資料中的posts進行get操作，只需在基地址後加上/posts，而若是要對其中的id為1的進行操作，則在基地址後加上/posts/1

?

vuex

使用vuex的時候參照了github的vue大專案elm，覺得這種資料分離的方式特別好，推薦給大家

首先安裝依賴npm install vuex --save

新建資料夾store，下建index.js和mutation.js,這裡我只建了mutation.js，原版還有getter.js和action.js，但因為專案中沒用到，故沒有建。。。

index.js

import Vue from `vue`
import Vuex from `vuex`
import mutations from `./mutations`

Vue.use(Vuex)

const state = {
    example: ``
}


export default new Vuex.Store({
    state,
    mutations
})
複製程式碼

mutation.js

export default {
    setExample (state, newData) {
        state.example = newData
    }
}
複製程式碼

從而在我們的工程檔案中，引入相應的函式傳入相應的資料即可

helloWorld.vue

...mapMutations([
    `setExample`
]),
複製程式碼

    async initData(){ // 非同步大法好
        let res = await getData();
        this.setExample(res.data)
        this.data = res.data;
    },
複製程式碼

service/getData.js

import fetch from `../config/fetch`

export const getData = () => fetch(`/posts`, {
});
複製程式碼

最後，專案結構是醬紫的

還有一點點。。。

專案中還用到了html轉pdf，放github上了，感興趣可以看一下~

感謝你的閱讀，希望你哈皮每一天

vue小記

json-server

vuex

還有一點點。。。

相關文章