vuexの基礎

Vuexプロフィール

このセクションでは、インストールとvuexを説明します

vuexプロフィール

vuexは、状態管理の専門アプリケーションvue.jsある
ストレージ管理アプリケーション集中すべてのコンポーネントの状態を使用して
予測可能な方法の変更を保証し、対応するルールを

シナリオ

モバイル側の開発や技術開発は、豊富な経験を持っている
uejs、ノードおよびアプレットの深さの研究を

同一の状態に依存して、複数のビュー
同じ状態の異なるビューから変化させるように作用します

このセクションでは、インストールとVUEを説明します

状態の
データウェアハウス

ゲッター
データを取得するために使用されます

突然変異
データを変更するために使用

アクション
突然変異を提出します

インストールvuex

Vuexインストールパッケージは、NPM vuexをインストール

新しいVuex.store（）：vuexの例を作成します

Main.js vuexインスタンスは、オブジェクトVUEにマウントされます

インストールvuex戦闘

vue create vuex-demo

cd vuex-demo

code .

npm serve

yarn add vuex

main.js

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({
 state: {
  count: 0
 }
})

糸サーブ

カウント++はじめに

状態
カウント・フィールドで作成

変異
の変異では、カウントを作成する++

ボタン
クリックイベントを追加するためには、変異変更カウントをトリガ

++戦闘を数えます

const store = new Vuex.store({
 state: {
  count: 0
 },
 mutations: {
  countIncrease(state) {
   state.count++
  }
 // 第二种
 countIncrease(state, v) {
   state.count = v
  }
 }
})

new Vue({
 store,
 render: h=> h(App)
}).$mount("#app")

App.vue

<template>
 <div id="app">
  <h1>count: {{this.$store.state.count}}</h1>
 <h1>count:{{count}}</h1>
 <button @click="countIncrease"></button>
 </div>
</template>

methods: {
 countIncrease() {
  const v=100;
  this.$store.commit('countIncrease', v)
 }
}

分析

アカウントのログイン
異なるコースは、異なるメンバーシップ・レベルを必要とする
普通のメンバーが
メンバーのVIP
シニアメンバーを

機能

制御state.userInfoルーティング制限ログインユーザによって
複数のコンポーネントを共有state.userStatus state.vipLevel状態と
多成分の改変およびstate.vipLevel state.userStatus

index.js

const store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions
})

Vue.use(Vuex)

exprot default store;

ストア・ファイル

action.js
getter.js
index.js
mutations.js
state.js

ログイン権

店舗
index.js
state.js
mutations.js

// index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

const store = new Vuex.Store({
 state,
 mutations
})

export default store

main.js

import Vue from "vue"
import App from "./App.vue"
import Vuex from "vuex"
import router from "./router"
import store from "./store"

Vue.config.productionTip = false

Vue.use(Vuex)

state.js

export default {
 userInfo: ""
}

main.js

Vue.prototype.$store = store
router.beforeEach((to, next) => {
 console.log(store.state, "store.state")
 if (store.state.userInfo || to.path('./login')) {
  next()
 } else {
  next({
    path: "/login"
  })
 }
})

state.js

export default {
 userInfo: "",
 userStatus: "",
 vipLevel: ""
}

---

ローカルコンテンツのこの数字は（例：著作権やその他の問題への）ビットを取得しない場合は、整流のための私達に連絡してください、タイムリーにすることができ、最初の時間に処理されます。

---

親指ください！あなたが同意しているので/励ましは、私の文章の最大の力です！

ようこそ注意ニッチT-のジェーンの本！

これは、品質、態度のブログです