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上了，感興趣能夠看一下~

感謝你的閱讀，但願你哈皮每一天