Vuex結合Mongoose最佳實踐

這篇文章的草稿放在個人Ghost博客後臺由來已久了，由於我想在寫一篇Vuex總結性的文章以後再發表它。這樣也有個按部就班的感受。本文適合瞭解Vue.js、Vuex、以及MongoDB的小夥伴。

Why Mongoose?

• Node下開發應用，如何持久化數據？

  • 我以爲MongoDB是很好的解決方案。尤爲適合敏捷開發。

• Node下使用MongoDB，如何操做MongoDB數據庫？

  • 我剛開始接觸MongoDB的時候還在用node-mongodb-native，MongoDB出品的Node.js驅動。操做數據庫可不像Oracle，MySQL這種關係型數據庫，基本的SQL語言搞定。那代碼量一坨一坨的。因而發現了Mongoose，有了它代碼量減輕了很多。那麼就用它了。

須要實現的事情：

• 鏈接MongoDB數據庫

• 定義一個schema而且建立一個model

• 在應用中使用model

• 經過Vuex全局化model

• 在組件中經過getters獲取model

鏈接MongoDB數據庫

只需鏈接一次。

App.vue

<script>
import store from './vuex/store'
import mongoose from 'mongoose'
import env_conf from './config/env_dev.json' // 讀取配置文件
mongoose.connect(env_conf.db.uri, env_conf.db.options)

export default {
  name: 'App',

  store,

  data () {
    return {
      title: 'vuex-mongoose'
    }
  }
}
</script>

<template>
  <div id="app">
    <h1><span v-text="title"></span></h1>
  </div>
</template>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

config/env_dev.json

{
  "name": "development",
  "db": {
    "uri": "mongodb://localhost:27017/vuex-mongoose",
    "options": {
      "server": {
        "poolSize": 10
      }
    }
  }
}

定義一個schema並建立一個model

vuex/models/user.js

導出一個user的model爲app所用。

import mongoose from 'mongoose'

const Schema = mongoose.Schema

const userSchema = new Schema({
  _id: Number,
  username: String,
  password: String
})

const User = mongoose.model('user', userSchema)

export default User

這裏須要注意一點，const User = mongoose.model('user', userSchema) 這句聲明的User中使用的數據庫集合爲user，可是實際在數據庫中對應的是user的複數，即爲users。

在應用中使用model

把user的model寫成一個模塊以後，在應用中使用model變的很簡單。

只需導入user模塊便可：

import User from '../models/user'

這樣就可使用model來操做數據庫了。好比生成一條記錄能夠這樣：

const userInfo = {
  username: 'Hello Kitty',
  password: '666666'
}
User.create(userInfo, function (err, result) {
  if (err) {
    console.log(err);
  }
})

經過Vuex全局化model

• 爲何要全局化model？

  • 全局化model的意思其實就是經過vuex把model做爲一個state（狀態）保存起來。在應用中能夠經過getters獲取到model。這樣能夠解決咱們屢次導入user模塊，從而使數據庫鏈接數增長的問題。

App.vue

<script>
import store from './vuex/store'
import mongoose from 'mongoose'
import env_conf from './config/env_dev.json'
mongoose.connect(env_conf.db.uri, env_conf.db.options)
import { setModel } from './vuex/actions'
import User from './vuex/models/user' // 導入user的model模塊

export default {
  name: 'App',

  store,

  data () {
    return {
      title: 'vuex-mongoose'
    }
  },

  ready () {
    this.setModel(User) // 存儲在vuex裏
  }
}
</script>

<template>
  <div id="app">
    <h1><span v-text="title"></span></h1>
  </div>
</template>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

vuex/modules/global.js

// vuex/modules/global.js
import {
  SET_MODEL
} from '../mutation-types'

// initial state
const state = {
  User: ''
}

// mutations
const mutations = {
  [SET_MODEL](state, User) {
    state.User = User
  }
}

export default {
  state,
  mutations
}

在組件中經過getters獲取model

CreateUser.vue

vuex: {
  getters: {
    User: ({ global }) => global.User
  }
},

methods: {
  createUser() {
    const userInfo = {
      username: 'Hello Kitty',
      password: '666666'
    }
    this.User.create(userInfo, function (err, result) {
      if (err) {
        console.log(err);
      }
    })
  }
},

ready () {
  this.createUser()
}

這樣咱們就能夠在組件中使用User作各類數據庫操做了。

代碼樣本：vue-demo-collection/vuex-mongoose

原文：Vuex結合Mongoose最佳實踐