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最佳实践