vue中的狀態管理 vuex store

vuex store 是響應式的，當vue組件從store中讀取狀態（state）時，若store中的狀態發生更新時，會及時的響應給其他的組件。

store 中的四個核心選項:     state mutation  getters  actions

1）state是用來存放組件之間共享的數據，一般會在組件的計算屬性中獲取state的數據。

使用：this.$store.state.  ...

2)  在 Vuex store 中，實際改變 狀態(state) 的唯一方式是通過提交(commit) 一個 mutation。

在組件里提交： this.$store.commit('change', payload)

mutations下的函數接收state作為參數，接收一個叫做payload（載荷）的東西作為第二個參數，這個東東是用來記錄開發者使用該函數的一些信息，比如說提交了什么，提交的東西是用來干什么的，包含多個字段，所以載荷一般是對象

還有一點需要注意：mutations方法必須是同步方法！

　　var myStore =  new Vuex.Store({
        state:{
            //存放組件之間共享的數據
            name:"jjk",
            age:18,
            num:1
        },
         mutations:{
             //顯式的更改state里的數據
             change(state,a){
              state.num += a; 
             }
         },
        
    });

 Vue.component('hello',{
        template:"<p @click='changeNum'>姓名：{{name}} 年齡：{{age}} 次數：{{num}}</p>",
        computed: {
            name(){
                return this.$store.state.name
            },
            age(){
                return this.$store.getters.getAge
            },
            num(){
                return this.$store.state.num
            }
        },
        mounted(){
            console.log(this)
        },
        methods: {
            changeNum(){
                //在組件里提交
                // this.num++;
                this.$store.commit('change',10)
            }
        },
        data(){
            return {
                // num:5
            }
        }
    })

3）getters

　　getters可以看成是store的計算屬性。

　　getters下的函數接收state作為第一個參數。getters可以過濾組件中的數據，過濾的數據會存放到$store.getters對象中。

<script>
    Vue.use(Vuex);
   var myStore =  new Vuex.Store({
        state:{
            //存放組件之間共享的數據
            name:"jjk",
            age:18
        },
         mutations:{
             //顯式的更改state里的數據
         },
         getters:{
             getAge(state){
                 return state.age;
             }
         },
         actions:{
             //
         }
    });

    Vue.component('hello',{
        template:"<p>姓名：{{name}} 年齡：{{age}}</p>",
        computed: {
            name:function(){
                return this.$store.state.name
            },
            age:function(){
                return this.$store.getters.getAge
            }
        },
         mounted:function(){
            console.log(this)
        }
    })
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)
        }
    })
</script>

4）actions

actions：類似於mutation ，但是mutations只能處理同步函數，而actions則是可以處理任何的異步操作 

actions和mutations的區別：

　1.Actions 提交的是 mutations，而不是直接變更狀態。也就是說，actions會通過mutations，讓mutations幫他提交數據的變更。

　2.Action 可以包含任意異步操作。

<script>
    Vue.use(Vuex);
   var myStore =  new Vuex.Store({
        state:{
            //存放組件之間共享的數據
            name:"jjk",
            age:18,
            num:1
        },
         mutations:{
             //顯式的更改state里的數據
             change:function(state,a){
                //  state.num++;
               console.log(state.num += a); 
               
             },
             changeAsync:function(state,a){
                 console.log(state.num +=a);
             }
         },
         getters:{              getAge:function(state){
                 return state.age;
             }
         },
         actions:{
　　　　　　　　//設置延時
             add:function(context,value){
                 setTimeout(function(){
　　　　　　　　　　　//提交事件
                    context.commit('changeAsync',value);
                 },1000)
                 
             }
         }
    });

    Vue.component('hello',{
        template:`
                <div>
                    <p @click='changeNum'>姓名：{{name}} 年齡：{{age}} 次數：{{num}}</p>
                    <button @click='changeNumAnsyc'>change</button>
                </div>`,
        computed: {
            name:function(){
                return this.$store.state.name
            },
            age:function(){
                return this.$store.getters.getAge
            },
            num:function(){
                return this.$store.state.num
            }
        },
        mounted(){
            console.log(this)
        },
        methods: {
            changeNum(){
                //在組件里提交
                this.$store.commit('change',10)
            },
 　　　　　　　　//在組件里派發事件 當點擊按鈕時，changeNumAnsyc觸發-->actions里的add函數被觸發-->mutations里的changeAsync函數觸發
            changeNumAnsyc:function(){
                this.$store.dispatch('add', 5);
            }
        },
        data:function(){
            return {
                // num:5
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)
        }
    })
</script>

this.$store.dispatch('add', 5);

執行時會觸發actions里面的方法，和commit的用法相同。

 

action的大致用法：

1. 在actions選項里添加異步函數並提交到對應的函數（在mutation選項里）中 

 context.commit('changeAsync',value);

actions:{
   add:function(context,value){
      setTimeout(function(){
           context.commit('changeAsync',value);
      },1000)
                 
   }
}        

2. 在組件里：將dispatch“指向”actions選項里的函數

 changeNumAnsyc:function(){
    this.$store.dispatch('add', 5);
 }      

3.　在mutations選項里，要有對應的函數 

changeAsync:function(state,a){
    console.log(state.num +=a);
}

 

https://www.cnblogs.com/first-time/p/6815036.html