1. vue でグローバル変数にアクセスする方法

1.プロジェクトの入り口から始めて、私のプロジェクトでは、index.htmlの近くにファイルがありmain.ts、内容は次のとおりです。

import bootstrap from './bootstrap'

bootstrap('#app')

2. 上記の紹介ではbootstrap.ts、次のようなコードがあります。

import store from './store/index'

......

export default function mount(el: string) {
  return new Vue({
    store,
    router,
    render: h => h(App),
  }).$mount(el)
}

storeその中で、それを紹介してから、new Vueその中に書くことが重要です({store})。

3. この序文では/store/index.ts、次のように書かれています。

import Vue from 'vue'
import Vuex, { StoreOptions } from 'vuex'
import { RootState } from './types'

Vue.use(Vuex)

const store: StoreOptions<RootState> = {
  state: {
    version: '1.0.0',
    uploadUrl: ''
  },
  mutations: {
    "SET_UPLOADURL": function(state,url){
      state.uploadUrl = url
      console.log("保存上传url",url)
    }
  },
  getters: {
    "GET_UPLOADURL": function(state){
      console.log("返回上传url",state.uploadUrl)
      return state.uploadUrl
    }
  }
}

export default new Vuex.Store<RootState>(store)

その中で重要なのはstate, mutations;はアクセスできる変数です. まずこの例を使ってください;変数の保存方法であり, これが同期メソッドですgetters(非同期で使えるなら詳しくは書きません. here);変数を取得する read メソッドです。
stateuploadUrl
mutationsactions
getters

4.types.ts上で使用されているここに挿入します。内容は次のとおりです。

export interface RootState {
  version: string,
  uploadUrl: string,
}

これはStoreOptions<RootState>上記で使用され、状態内の変数のタイプを指定します。

5. vue の js 部分に変数を保存する方法:

this.$store.commit('SET_UPLOADURL','http://xxx.xxx.com/upload?filename=abc')

これにより、値stateがに格納されますuploadUrl。

6. vue の js 部分で変数を読み取る方法:

console.log(this.$store.getters.GET_UPLOADURL)

stateこのようにして、その中の値を読み取ることができuploadUrl、値は保存されるだけですhttp://xxx.xxx.com/upload?filename=abc

2. 備考

1.new Vue({})グローバルに宣言されているため、実行メソッドがstore使用可能this.$store

2.フレームワーク内の固定メソッドである必要がありcommitますgetters

3. 閲覧SET_UPLOADURL・撤回時の明細書と内部GET_UPLOADURLの対応mutationsgetters

グローバル変数にアクセスする Vue の方法 (vuex の状態実装を使用)

1. vue でグローバル変数にアクセスする方法

2. 備考

おすすめ