vuejsで実装されるプラグインの状態管理について詳しく解説

この記事では、vuejs でのプラグイン状態管理の実装について説明します。vuejs でのプラグイン状態管理の実装について知らない場合、または vuejs でのプラグイン状態管理の実装に興味がある場合は、見てみましょう。この記事を一緒に見てください。それでは早速、本題に入りましょう

初心者にとって、vuex に初めて触れたとき、それは非常に強力で使いやすいということだけを聞いたでしょう。そして、それを理解しようとすると、彼らは無力であるように見えました。私も同様で、最初にそれに触れたときは、ドキュメントやビデオを読みましたが、最終的には脇に置きました。しばらくしてから考えてみると、新たな知識や理解が得られました。

まず、vuex を本当にマスターしたい場合は、次の質問を理解する必要があります:

1. vuex とは何ですか?

2 .vuex はどのような状況で使用すべきでしょうか (つまり、vuex はどのような問題を解決できるのでしょうか)、そしてどのような状況で vuex を使用するのが適しているのでしょうか?

それでは、これら 2 つを見てみましょう。最初の質問:

vuex とは何ですか? 公式ウェブサイトには次のように記載されています: Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。私の一般的な理解によれば、vuex はさまざまなコンポーネント間のいくつかの状態を管理するために使用され、これらの状態はパブリック (共有) 部分であると理解できます。現時点では、どのコンポーネントでもステータスを取得したり、何らかの動作イベントをトリガーしたりできます。

vuex はどのような場合に使用する必要がありますか? 公式 Web サイトには次のように記載されています: 大規模な単一ページのアプリケーションを開発する予定がない場合は、 Vuex は扱いにくく、冗長になる可能性があります。それは本当です - あなたのアプリが十分に単純であれば、おそらく Vuex を使用しないほうがよいでしょう。シンプルな グローバル イベント バス で十分です。ただし、中規模から大規模の単一ページ アプリケーションを構築する必要がある場合は、コンポーネント (Vuex) の外部で状態をより適切に管理する方法を検討することになるでしょう。 自然な選択となるでしょう。

それでは、比較的大規模なプロジェクトを開発していると仮定します。vuex はどこで使用されるのでしょうか? アプリケーションの複雑さが増すにつれて、コンポーネント間で転送されるデータやコンポーネントの状態が増えます。たとえば、コンポーネント A がコンポーネント B に入るとき (ページ A がページ B に入るとき)、多くの場合、いくつかのパラメーターを渡す必要があります。この時点で、パラメータを URL の後に配置してパラメータとして渡すことを選択できます。パラメータを簡単に公開したくない場合は、最初にセッションまたはローカルストレージに保存し、入力時にそれを取り出すことができます。 2ページ目。はい、これは確かに解決策であり、よく使用されています。しかし、現時点ではこれは良い方法ではありません。vuex が必要です。さらに、vuex の基本を理解すると、vuex 管理がモジュール思考に基づいており、その後のプロジェクトの管理と保守に非常に適していることがわかります。

それでは、vuex の中核となる概念をより深く理解する必要があります。以下は私が個人的に理解している概念です。 まずは公式ドキュメントの Vuex2.0 の概念を読むことをお勧めします。

Vuex Store in のテンプレート化された定義は次のとおりです:

1 と state は、初期化データ (状態) が vuex に配置される場所であるアプリケーションのデータ構造を定義します。これは、データを保存するために使用されるコンポーネント内のデータと同等です。

 state:{
        todoLists:[],
    },

2、getterは、状態内のtodoListの総数を取得するなど、状態から状態を導出することです。実際、ゲッターが vuex に配置される点を除けば、これは vue の計算プロパティと同等です。

//Getters函数 接受 state 作为其第一个参数
  getters:{
      todoCount(state){
          return state.todoLists.length;
      }
  },

3、変異は、アプリのステータス更新が許可される唯一の場所です。 vue の $on イベントに似ています: 各ミューテーションには、文字列イベント タイプ (タイプ) と コールバック関数 (ハンドラー) があります。注: ミューテーションは同期関数である必要があります

//和Getters函数一样 接受 state 作为其第一个参数
  mutations:{
      //新増 TodoList item
      ONADDTODO(state,item){
          state.aTodos.push(item);
      },
      //删除 TodoList item
      ONDELTODO(state,index){
          state.aTodos.splice(index,1);
      },
      //设置 错误提示信息
      ONERROR(state,str){
          state.massage=str;
      }
  },

4、アクション送信によってトリガーされる変更情報の説明を定義します、任意の非同期操作をアクションで実行できます、一般的な例はサーバー データを取得します。データの取得が完了すると、store.commit() (vue の $emit と同様) が呼び出され、変更が呼び出されます。 ストア内のステータス。コンポーネントでディスパッチを使用してアクションを発行できます。

//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
    因此你可以调用 context.commit 提交一个 mutation，
    或者通过 context.state 和 context.getters 来获取 state 和 getters
  actions:{
      //提交 ONADDTODO
      onAddTodo(context,item){
          if(item.value!=""){
              context.commit("ONADDTODO",item);
              context.commit("ONERROR","");
          }else{
              context.commit("ONERROR","添加失败")
          }
      },
      //提交 ONDELTODO
      //可利用 ES2015 的 [参数解构] 来简化代码
      onDelTodo({commit},index){
          //commit=context.commit
          commit("ONDELTODO",index);
      }

  }

Vuex ヘルパー関数

1, Vuex.mapState(map: Array | Object): Object
Vuex で状態を返すコンポーネントの計算プロパティを作成します店。

2. Vuex.mapGetters(map: Array | Object): Object
作成されたコンポーネントの計算されたプロパティはゲッターの戻り値を返します。

3. Vuex.mapActions(map: Array | Object): Object
アクションを分散するコンポーネントメソッドを作成します。

4. Vuex.mapMutations(map: Array | Object): Object
ミューテーションを送信するコンポーネントメソッドを作成します。

Vuex 補助関数の具体的な使用法については、以下を参照してください: API ドキュメント

TodoList の例

Vuex の基本概念を理解した後、Todolist を作成して、使用プロセス全体。

vue-cli ツール を使用してプロジェクト ディレクトリを作成し、vuex をインストールします

vue init webpack-simple vue-vuex-todolist
npm install 
npm install vuex --save
npm run dev   //启动项目

まず、状態管理関連のコードを格納するための store という名前のディレクトリを作成します。 js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        massage:"",
        aTodos:[{value:"默认默认",id:0}],
    },
    getters:{
        nCounts(state){
            return state.aTodos.length;
        }
    },
    mutations:{
        //新増 TodoList item
        ONADDTODO(state,item){
            state.aTodos.push(item);
        },
        //删除 TodoList item
        ONDELTODO(state,index){
            state.aTodos.splice(index,1);
        },
        //设置 错误提示信息
        ONERROR(state,str){
            state.massage=str;
        }
    },
    actions:{
        //提交 ONADDTODO
        onAddTodo(context,item){
            if(item.value!=""){
                context.commit("ONADDTODO",item);
                context.commit("ONERROR","");
            }else{
                context.commit("ONERROR","添加失败")
            }
        },
        //提交 ONDELTODO
        onDelTodo({commit},index){
            commit("ONDELTODO",index);
        }

    },
    modules:{}
});

export default store;

main.js ファイルで、構築された Vue インスタンスに Store インスタンスを追加します

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

src ディレクトリの下に、vue コンポーネントを保存するためのコンポーネントという名前のディレクトリを作成し、 vue、list.vue ファイルを作成します

input.vue

<template>
    <p class="form-group ">
      <input type="text" class="form-control"  placeholder="" v-model="value"  />
      <button type="buttom" class="btn btn-default" @click="addItem">Add Item</button>
    </p>
</template>
<script>
    export default{
        data(){
            return {
                value:"",
                id:0
            }
        },
        methods:{
            addItem(){
                let item={value:this.value,id:++this.id};
                this.value="";
                this.$store.dispatch("onAddTodo",item);
            }
        }

    }
</script>
<style lang="scss">
    %box{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
    .form-group{@extend %box;
        .form-control{-webkit-box-flex:1;}
    }
</style>

list.vue

<template>
    <p class="todolist">
      <ul class="list-group">
        <li class="list-group-item" v-for="(item,index) in aTodos" >
            <span>{{item.value}}</span>
            <button class="btn btn-default" @click="delItem(index)">删除</button>
        </li>
       </ul>
    </p>
</template>
<script>
    import {mapState} from "vuex";
    export default{
        data(){
            return {}
        },
        methods:{
            delItem(index){
                this.$store.dispatch(&#39;onDelTodo&#39;,index);
            }
        },
        computed:{
            ...mapState([
                &#39;aTodos&#39;
            ])
        }
    }
</script>
<style lang="scss">
    %box{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
    .list-group-item{display: -webkit-box;-webkit-box-align:center;
        span{
            display: block;
            -webkit-box-flex:1;
        }
    }
</style>

修改App.vue文件

<template>
  <p id="app">
    <h1>Vue.js Vue TodoList</h1>
    <hr>
    <todoInput />
    <todoList />
    <p>todoList 数量：{{todoCount}}</p>
    <pre class="brush:php;toolbar:false">{{$store.state}}

<script> import todoInput from &#39;./components/input.vue&#39;; import todoList from &#39;./components/list.vue&#39;; import {mapGetters} from "vuex"; export default { name: &#39;app&#39;, data () { return { msg: &#39;Welcome to Your Vue.js App&#39; } }, computed:{ ...mapGetters({ todoCount:"nCounts" }) }, components:{ todoInput, todoList } } </script>

index.html添加bootstrap.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-vuex-demo</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <p id="app"></p>
    <script src="/dist/build.js"></script>
  </body>
</html>

以上就是本篇文章的所有内容，大家要是还不太了解的话，可以自己多实现两边就很容易掌握了哦！

相关推荐：

Vuejs搜索匹配功能实例详解

Vuejs2.0子组件调用父组件的方法

以上がvuejsで実装されるプラグインの状態管理について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。