vuex の使用手順の分析

php中世界最好的语言
リリース: 2018-05-03 15:42:34
オリジナル
1787 人が閲覧しました

今回はvuexを使用する際の注意事項についての分析をお届けします。以下は実際のケースです。

Vuexとは何ですか?

vuex は、vue.js 用に特別に設計された集中状態管理アーキテクチャです。州?私はこれを、他の Vue コンポーネントと共有する必要があるデータ内の プロパティ の一部 (状態と呼ばれる) として理解しています。簡単に言えば、データ内で共有する必要があるのは属性です。

1. vueコンポーネントで

のenabledcheckboxメソッドを実行します。 trueは状態の値を変更するために使用されるパラメータです

  this.$store.dispatch("enabledcheckbox",true)
ログイン後にコピー

状態からusereditの値を取得します

this.$store.state.useredit
ログイン後にコピー

2 オブジェクトをエクスポートしますvuex で state に値を追加します

state の値を変更するミューテーションを追加します

main.js のミューテーションにactionを追加します

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
export default new vuex.Store({
    state: {
      useredit: false,
    },
    mutations: {
      ENABLEDCHECKBOX(state, value) {
        state.checkboxDisable = value
      },
    },
    actions: {
      enabledcheckbox({ commit }, value) {
        commit('ENABLEDCHECKBOX', value)
      },
    }
  })
  //console.log(vuex)
ログイン後にコピー

in main.js

import store from './vuex'
new Vue({
 el: '#app',
 router,
 store,
 render:h=>h(App)
})
ログイン後にコピー

まとめ

私はあなたを信じていますこの事例を読みました この方法をマスターしたら、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue は動的更新 Echarts コンポーネントを実装します

ブートストラップで selectpicker を使用してドロップダウン ボックスを実装します

以上がvuex の使用手順の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート