vue中的状态管理 vuex store

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

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);
}