Heim  >  Artikel  >  Web-Frontend  >  So installieren Sie vuex in vue.js

So installieren Sie vuex in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-12-01 15:05:092110Durchsuche

So installieren Sie vuex mit vue.js: Geben Sie zuerst den Projektpfad ein, geben Sie den entsprechenden Code in das Projektterminal ein und zeigen Sie dann das vuex-Plug-in in der Paket-JSON-Datei an Verzeichnis; schließlich in [main. js] einfach vuex anwenden.

So installieren Sie vuex in vue.js

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6. Diese Methode ist für alle Computermarken geeignet.

vue.js So installieren Sie vuex:

Installation:

Geben Sie nach Eingabe des Projektpfads Folgendes ein: npm install vuex --save   或者  cnpm install vuex --save

2. Nach Abschluss der Installation wird vuex im Projekt angezeigt package.json-Datei-Plug-in, wie folgt:

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.3.0"
  },

3. Erstellen Sie eine neue Datei „store.js“ im src-Verzeichnis des Projekts. Der Dateiinhalt lautet wie folgt:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
    //所有的数据都放在state中
    state:{},
    //操作数据,唯一的通道是mutations
    mutations:{},
    //actions,可以来做异步操作,然后提交给mutations,而后再对state(数据)进行操作
    actions:{}
})

4. Wenden Sie vuex in main.js an:

  Importieren Laden Sie es herunter und verwenden Sie es dann im neuen Vue. Der Code lautet wie folgt:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'   //导入store
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,   //在new Vue中使用
  components: { App },
  template: &#39;<App/>&#39;
})

Verwandte kostenlose Lernempfehlungen: Javascript(Video)

Das obige ist der detaillierte Inhalt vonSo installieren Sie vuex in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn