ホームページ  >  記事  >  ウェブフロントエンド  >  vuexの簡単な使い方

vuexの簡単な使い方

亚连
亚连オリジナル
2018-05-26 16:36:311426ブラウズ

vuex は、vue.js 用に特別に設計された集中状態管理アーキテクチャです。この記事ではvuexの簡単な使い方を中心に紹介しますので、困っている方は参考にしてください

Vuexとは何ですか?

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

1. vueコンポーネント

で、enabledcheckboxメソッドを実行します。trueは、状態

  this.$store.dispatch("enabledcheckbox",true)

の値を変更するために使用されるパラメータです。状態

this.$store.state.useredit

からusereditの値を取得します。

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

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

ミューテーションにアクションを追加します

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)

main.js内

import store from './vuex'
new Vue({
 el: '#app',
 router,
 store,
 render:h=>h(App)
})

上記は私です。皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

jQuery Ajax経由でファイルをアップロードする方法

Ajaxを使用して非同期更新リクエストを実装する

Ajax経由でファイルをアップロードするAjaxリクエストにFormDataを使用する

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。