1、公共Vueのプロジェクトの参照方法
各成分を一度ワードへのすべての参照は、多くの問題であるならば、必然的に、このような組立方法でのような多くの問題を、遭遇する新人白、利用VUEのプロセスとして、多くの中で使用することができますコードの量を増やします。より良い配置を行う方法を、直接コードを見てあまり話をしませんでした
まず、jsの中main.jsに公衆に導入されました。その後、チェーンのVueのプロトタイプに形成する方法。このような図のように。
そして、この組立方法を導入するまで必要
mroutedは（）{
//メソッドの呼び出し
、this.common.loginを（）
}
/ **次にパブリックメソッドは、単純なコード* /書き込みする
エクスポートのデフォルト{
機能を（）{：ログイン
「コードは」はconsole.logを（ ）
}
}
2、本のVuex。$ Store.commit
我々はすべて知っているように、父と息子のアセンブリ間でのプロジェクトのVUEに小道具を使用することができるか、または$は、データ転送のための他の手段を放出し、そしてプロジェクトが少し大きめの場合は、その後、多くの並列のコンポーネントがありますが、これらのコンポーネント間でデータを転送するには、この時間は、これらの方法の使用は、多くのトラブルになり、コードは不利なテイクになります。
私たちは、この問題を解決するためにvuexでき
vuex実際には、公式ホームページ理解は非常に良いではありません、あなたはコードを直接実装方法を確認することができます。
まず最初は、vuexをインストールすることで
、ストレージ関連のファイルを専門に別のファイルストアディレクトリを作成することができ
、その後、index.jsファイルを作成します。
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 初始化全局的一个变量 testTxt: {"tips":"这是一条vuex的数据","id":1} } }) export default storeその後でmain.js/main.ts 、登録店
import Vue from 'vue'
import App from './App' import router from './router' import store from './../store/index' /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
アセンブリでは、次の
export default {
...
data(){ value : "这又是修改后的value", }, computed: { getTxt() { return this.$store.state.testTxt.tips; } }, methods: { modifyTxt: function() { this.$store.commit('modifyTips', this.value) } } ... } その後、ファイルindex.jsを変更することができます
const store = new Vuex.Store({ state: { // 初始化全局的一个变量 testTxt: {"tips":"这是一条vuex的数据","id":1} }， mutations: { modifyTips(state,msg) { state.testTxt.tips= msg; } } }) export default store
もちろん、vuex新バージョンは確かに、より優れています