Vue结合Mongoose最佳实践

这篇文章的草稿放在我的Ghost博客后台由来已久了,因为我想在写一篇Vuex总结性的文章之后再发表它。这样也有个循序渐进的感觉。本文适合了解Vue.js、Vuex、以及MongoDB的小伙伴。

Why Mongoose?

  1. Node下开发应用,如何持久化数据?

我觉得MongoDB是很好的解决方案。尤其适合敏捷开发。

  1. Node下使用MongoDB,如何操作MongoDB数据库?

我刚开始接触MongoDB的时候还在用node-mongodb-native,MongoDB出品的Node.js驱动。操作数据库可不像Oracle,MySQL这种关系型数据库,基本的SQL语言搞定。那代码量一坨一坨的。于是发现了Mongoose,有了它代码量减轻了不少。那么就用它了。

需要实现的事情:

  1. 连接MongoDB数据库

  2. 定义一个schema并且创建一个model

  3. 在应用中使用model

  4. 通过Vuex全局化model

  5. 在组件中通过getters获取model

连接MongoDB数据库

只需连接一次。

App.vue

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'
}
}
}

# 

body {
font-family: Helvetica, sans-serif;
}

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

  1. 为什么要全局化model?

全局化model的意思其实就是通过vuex把model作为一个state(状态)保存起来。在应用中可以通过getters获取到model。这样可以解决我们多次导入user模块,从而使数据库连接数增加的问题。

App.vue

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里
}
}

# 

body {
font-family: Helvetica, sans-serif;
}

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

关键字:vuex, vue.js, mongoose

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部