vuexの簡単な使い方を詳しく解説

この記事では主にvuexの簡単な使い方を詳しく紹介しますので、参考にしてください。

1 ディレクトリ構成

公式の推奨に従ってsrcディレクトリにストアディレクトリを作成

2 ストア内にファイルを作成

公式に従ってactions.js、getter.js、index.js、mutationsを作成するRecommendation.js、mutations-types.js、state.js

2.1 state.js

state.js: vuex の単一の状態番号であり、1 つのオブジェクトにすべてのアプリケーションレベルの状態が含まれます。これまでのところ、「単一のデータソース (SSOT)」として存在します。これは、各アプリケーションにストア インスタンスが 1 つだけ含まれることも意味します。単一の状態ツリーを使用すると、状態の特定の部分を直接見つけて、デバッグ中に現在のアプリケーション状態全体のスナップショットを簡単に取得できます。 (すべての vuex ステータス データを管理するために使用されます)

/*
* 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态
* 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）
*
*/

const state = {

 // 城市状态，用来管理城市
 city: {},
 cityList: [],
 fullScreen: true,
 palyer: false
};

export default state;

2.2 mutations-types.js ミューテーションに関連する文字定数 (一部の定数) にアクセスします

/*
* 存取mutations相关的字符常量
*
*/

// 定义常量并导出
export const SET_CITY = 'SET_CITY';
export const SET_PLAY = 'SET_PLAY';
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
export const SET_CITY_LIST = 'SET_CITY_LIST';

2.3 mutations.js (変更された操作を定義します)

Vuex ストアを変更する唯一の方法状態を復元することは、突然変異をコミットすることです。 Vuex のミューテーションはイベントと非常に似ています。各ミューテーションには文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。このコールバック関数は、実際に状態変更を行う場所であり、最初のパラメータとして状態を受け取ります

/*
 * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
 * Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
 */

// 导入mutation-type.js里面所有的常量
import * as types from './mutation-types';

// 定义一个mutation可以供设置和修改值
const mutations = {

 /*
 * 1 表达式作为属性表达式放在方括号之内
 * 2 形参state （获取当前状态树的state）
 * 3 形参city，是提交mutation时传的参数
 * 4 使用mutation便于书写方便
 * 5 这个操作相当于往state.js里面写入city
  */
 [types.SET_CITY](state, city) {
  state.city = city;
 },
 [types.SET_CITY_LIST](state, list) {
  state.cityList = list;
 },
 [types.SET_FULL_SCREEN](state, flag) {
  state.fullScreen = flag;
 },
 [types.SET_PLAY](state, palyState) {
  state.palyer = palyState;
 }
};

// 导出mutation
export default mutations;

2.4 getters.js 場合によっては、ストア内の状態から何らかの状態を導出する必要があることがあります。

mapGetters 補助関数は、ストア内のゲッターをローカルの計算されたプロパティにマップするだけです

/*
* 有时候我们需要从 store 中的 state 中派生出一些状态
* 这里的常量主要是对state里面做一些映射
* mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性
*/

// 对state里面的属性做一些映射

export const city = state => state.city;  // 箭头函数的简写
export const cityList = state => state.cityList;
export const fullScreen = state => state.fullScreen;
export const palyer = state => state.palyer;

2.5 events.js

Action は、次の点を除いて突然変異に似ています:

1. Action は状態を直接変更するのではなく、突然変異を送信します。

2. アクションには、任意の非同期操作を含めることができます。

3. 1つのアクションでミューテーションを複数回変更すると、アクションをカプセル化できます

/*
* actions类似mutation
* 区别：
* 1：action提交的是mutation
* 2：action可以包含任意异步操作
*/

/*
 * 使用：
 * 1：在一个动作中多次改变mutation可以封装一个action
 */

import * as types from './mutation-types';

export const selectList = function ({commit, state}, {list, index}) {
 commit(types.SET_CITY_LIST, list);
 commit(types.SET_PLAY, false);
 commit(types.SET_FULL_SCREEN, true);
};

2.6index.jsエントリ

/*
* 入口
*/

import Vue from 'vue';
import Vuex from 'vuex';

// import * as obj from 'xxxx'; 会将xxxx中所有export导出的内容组合成一个对象返回。
import * as actions from './actions';

// 拿到getters里面的映射
import * as getters from './getter';
import state from './state';
import mutations from './mutations';
import createdLogger from 'vuex/dist/logger';

Vue.use(Vuex);
const debug = process.env.NODE_ENV != 'production';

export default new Vuex.Store({
 actions,
 getters,
 state,
 mutations,
 strict: debug,
 plugins: debug ? [createdLogger()] : []
});

3

3.1を使用してmain.jsにストアを登録します

main.jsに新規登録Vue インスタンスにストア

3.2 値を書き込むには、コンポーネントに mapMutations の糖衣構文を導入する必要があります

糖衣構文を導入します

import {mapMutations, mapActions} from 'vuex';

メソッドでは、mapMutations 補助関数がコンポーネント内のメソッドを次のようにマッピングしますstore.commit 呼び出し

...mapMutations({
 // 这里和mutation里面的常量做一个映射
 setCity: 'SET_CITY'
})

必要な場所に値を書き込みます

this.setCity(city);

3.3 値を取得します

vuex で値を取得するには、コンポーネントに mapGetters を導入する必要があります (mapGetters 補助関数はストア内のゲッターをマップするだけです)ローカル計算プロパティ)

mapGetters を導入します

import {mapGetters} from 'vuex';

計算プロパティでオブジェクトスプレッド演算子を使用して、ゲッターを計算オブジェクトに混合します

computed: {
  // 这里面的city映射的是state.js里面的city
  // 可以映射多个值
  ...mapGetters([
   'city',
   'cityList',
   'palyer',
   'fullScreen'
  ])
 }

値を取得します

created() {
  console.log(this.city);
  console.log(this.cityList[1]);
  console.log(this.palyer);
  console.log(this.fullScreen);
 }

3.4 アクションで値を保存します

...mapActions(['selectList'])

それを使用します保存する必要があります

this.selectList({
 list: this.citys,
 index: 1
});

以上が私がまとめたものです 皆さん、今後皆さんのお役に立てれば幸いです。

関連記事:

Vueシングルページアプリケーションが個別のスタイルファイルを参照する2つの方法

キーと値のペアをjsに格納することをベースにした紹介と注意点

angular4 複数のコンポーネントでサービスデータを共有する例コミュニケーション

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