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言語でできます.そのコードの量は一塊一塊だ.そこでモンゴスを発見し、コード量がかなり軽減されました.では、それを使います.

実現する必要があること:

MongoDBデータベース

への接続

schemaを定義しmodel

を作成する

アプリケーションでmodel

を使用

Vuexによるmodel

のグローバル化

コンポーネント内で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'
    }
  }
}

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のグローバル化

なぜモデルをグローバル化するのですか?

グローバル化モデルとは、vuexによってモデルを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 
  }
}

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-mongose
原文:VuexとMongooseのベストプラクティス