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);
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值