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做各种数据库操作了。