这篇文章的草稿放在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.Schemaconst 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.jsimport {  SET_MODEL} from '../mutation-types'// initial stateconst state = {  User: ''}// mutationsconst 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