2.1. vuex とは何ですか?
Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーション内のすべてのコンポーネントのステータスを管理し、対応するルールを使用してステータスが予測可能な方法で変化することを保証します。
2.2. なぜ vuex を使用するのですか?
-
一元的なステータス管理を実行し、異なるコンポーネントがデータを共有する問題を解決します。
-
異なるビューが同じ状態を変更する必要があるという問題。
-
vuexを使用するとステータスの変化がより明確になります。
-
2.3. vuex の使い方は?
-
インストールの概要 npm install vuex --save
-
vueに登録する
-
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) -
vuex ストアをインスタンス化する
-
const store = new Vuex.Store({ state: { count: 0, title:'vuex中的title' }, mutations: { increment(state,count) { state.count=count } } }) -
vue インスタンスにマウントされる
-
new Vue({ store }) -
コンポーネントでは、this.$store を通じて vuex を操作できます。
-
2.4. 中心となる概念
2.4.1、状態
-
状態とは何ですか? これは単一のステート ツリーであり、vuex の唯一のデータ ソースであり、データはステートに配置されます。
-
コンポーネントの状態の値を取得するには、this.$store.state を渡します。
-
または、計算されたプロパティ、mapState 補助関数を通じて取得でき、操作を簡素化できます。
-
import {mapState} from "vuex"; computed: { // 可以写一些其他的计算属性 ...mapState({ // title: state => state.title // title: "title" title: state => { return state.title; } }) }2.4.2、ゲッター
-
状態のデータを処理（導出）します
-
this.$store.getters を通じてゲッターの値を取得します。
-
または、計算された属性を通じて取得します。ゲッターには補助関数もあります。mapGetters 使用方法は、mapState と同じです。
-
「vuex」から {mapGetters} をインポートします。
-
計算結果: {
-
// 他の計算プロパティをいくつか書くことができます
-
... マップゲッター ({
-
タイトル：「タイトル」
-
})
-
}
-
2.4.3、突然変異
-
状態の値を変更する: データの流れを追跡しやすくするために、状態が変化するたびに、ミューテーションによって値を変更する必要があります。
-
突然変異を定義する
-
const store = new Vuex.Store({ // .... mutations: { increment(state, count) { state.count = count }, [CHANGE_TITLE](state, payload) { state.title = payload.title; // 不能这么写的 state.obj = { ...state.obj, title:payload.title } } } }) -
突然変異を呼び出す
-
this.$store.commit('突然変異の種類(関数名)', "パラメータ、パラメータは通常オブジェクト形式です")
-
this.$store.commit({type:'変異タイプ(関数名)'},...その他のパラメータ)
-
予防
-
Vue の対応する変更のルールに従う必要があります。これは、単にオブジェクトを割り当てるときに、古いオブジェクトを新しいオブジェクトに置き換える必要があることを意味します。
-
突然変異の種類または関数名は定数で維持できます。
-
突然変異関数は同期的である必要があります。
-
2.4.4、アクション
-
アクションは突然変異と似ていますが、次の点が異なります。
-
アクションには非同期操作を含めることができます
-
アクションは状態を直接変更できません。状態を変更したい場合は、ミューテーションをトリガーする必要があります。
-
2. 定義方法は?
-
actions: { // 通过context（上下文环境）可以触发mutation，触发action，获取state、getter等操作 // 第二个参数就是我们传递过来的参数 changeTitle(context,payload) { setTimeout(() => { context.commit(CHANGE_TITLE, payload) }, 1000); } } -
アクションを引き起こす方法
-
this.$store.dispatch('アクション名','パラメータ')
-
this.$store.dispatch({type:'アクションタイプ(関数名)'},...その他のパラメータ)
-
2.4.5、モジュール
-
単一のステート ツリーを使用するため、プロジェクト内のステートが集中し、メンテナンスが困難になりますが、このとき、ストアはモジュールによって分割できます。
-
モジュールを使用した後、各モジュールには独自の状態、突然変異、その他の内容が含まれるため、メンテナンスに便利です。
-
定義方法
-
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } })3. ナビゲーションガード（ルーティングガード）
-
3.2. グローバルフロントガード
-
router.beforeEach を使用して、グローバル beforeEach ガードを登録できます。
-
router.beforeEach を使用して、グローバル beforeEach ガードを登録できます。
router.beforeEach((to、from、next) => {
console.log(to)：
コンソール.ログ(から)
コンソール.ログ(次へ)
})
分析します:
// ルートプレガード
// ジャンプ後のページへ
// ジャンプ前のページから
// 次は関数です
// next() を直接呼び出してジャンプを許可します
// next(false) はジャンプを許可しません
// next('/index') はホームページにジャンプすることを意味します
router.beforeEach( ( to 、 from 、 next ) => {
//ジャンプする前に、さまざまな状態に基づいて指定されたページにジャンプするかどうかを決定する論理的判断を追加できます。
// たとえば、検索ページに入る前にログインする必要があります。
if(to.meta.isLogin){
//ログインが必要です
// ログインするかどうかを決定します。ログインするかどうかを決定するように記述します。
次（"/"）
}それ以外 {
// ログインは必要ありません
次（）
}
// 次へ(false)
// ログインが必要なページとログインが必要ないページを決定します
})
//注: 指定されたナビゲーション ガード内で next 関数が 1 回だけ呼び出されることを確認してください。これは複数回出現できますが、すべての論理パスが重複していない場合に限ります。そうでない場合、フックは解析されないか、エラーが報告されます。
-
3.3. 配線専用ガード
beforeEnter ガードをルート設定で直接定義できます。これらのガードには、グローバル beforeEnter ガードと同じメソッド パラメータがあります。
const router = new VueRouter({
ルート: [
{
パス: '/foo'、
コンポーネント: フー、
beforeEnter: (to、from、next) => {
// ...
}
}
]
})