状態管理vuexのVueの基礎

状態管理を実装Vuex

背景：Vueの状態管理

VUEXを導入する方法

1.直接VUEXを参照するために使用される新しいファイルindex.jsを作成します。

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

//直接使用VUEX
Vue.use(Vuex)

//创建vuex实例
const store = new Vuex.store({
    
})

export default store

ストアオブジェクトのmain.jsの2.はじめに

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

new Vuew({
    el:'#app',
    store,
    router,
    components:{
        App
    }
    templete:'<App/>'
    
    
})

3. 状態の宣言と使用

    const store = new Vuex.store({
        state:{
            count:1
        }
    })
    
    
    <h1> {{this.$store.state.count}} </h1>
   

4. ゲッター

   const store = new Vuex.store({
       state:{
           count:1
       },
       getters:{
           getStateCount:function(state){
               return state.count + 1
           }
       }
   })
   
    <h1> {{this.$store.getStateCount}} </h1>
   

どのように状態管理（変更データ）

1. レイアウトは、以下の

    <p>{{this.$store.count}} </p>
    <button @click="add">ADD</button>
    <button @click="minus">MINUS</button>
   

2. 対応する論理レイアウト

    methods:{
        add:function(){
            this.$store.commit("add")
        },
        minus:function(){
            this.$store.commit("minus")
        }
    }
   

3. vuexストアオブジェクトで

    const store = new Vuex.store({
        state:{
            count:1
        },
        getters:{
            getStateCount:function(state){
                return this.$store.state + 1
            }
        },
        mutations:{
              add:function(state){
                state.count = state.count + 1
            },
            minus:function(){
                 state.count = state.count + 1
            }
        }
    })
   

どのようにエレガントな状態管理

1. 使用アクション

    methods{
        add:function(){
            this.$store.dispatch("addF")
        },
        minus:function(){
        var n = 1;
             this.$store.dispatch("minusF" ,n)
        }
    }
   
   
    const store =  new Vuex.store({
        state:{
            count:1
        },
        getters:{
            getStateCount:function(state){
                return state + 1
            }
        },
        mutations:{
            add:function(state){
                state.count  = state.count  + 1
            },
            minus:function(state,n){
                state.count = (state.count -1)*(n+1)
            }
        },
        actions:{
            addF:function(context){
                context.commit("add")
            },
            minusF:function(context,n){
                context.commit("minus",n)
            }
        }
    })
   

2.私たちは、ページ上で、「これを利用気に入らない場合。 $stroe.state.count」和「これ。$ store.dispatch（ 'funname'）「は、そのような長い書き込み、その後、我々はmapStateを使用することができ、mapGetters、mapActionsそれはあまりにも面倒ではありません。

<p>{{count1}} </p>

import {mapState,mapGetters,mapActions}from 'vuex'

couputed:{
    mapSate{
        count1:state=>store.count
    }
}