Vuex

什么是Vuex?

    Vuex是一种状态管理模式,说白了Vuex就是数据管理的模式,它是管理数据的。

 

什么时候用Vuex?

    多个组件需要共享同一数据,让它们保持一致。比如  购物车。还有用户信息(用户id,用户名称,用户手机,用户邮箱,这些也可以都放在vuex中进行统一管理)

    Vuex解决了一个问题:保持多个组件之间数据一致。

store:   俗称 仓库,这个仓库里面放的是 一些数据 和  对数据的操作。

state:   仓库中的数据都放在这里,很像vue中的data;   状态   数据源  都是指它, 在这里的数据就像一个全局变量

mutation:  修改state中的数据, mutation里必须是同步操作

action:  它和mutation几乎一样,在action里可以执行异步操作

getter:  获取数据,得到数据。 虽然this.$store.state.xxx可以直接获取state中的数据,但是我们经常对拿到的数据做一些处理,例如 格式化 或者 过滤数据,这时候就要用到getter了。

 

获取state中的数据:  this.$store.state.xxx

调用mutations中的方法:this.$store.commit('xxx')

调用action中的方法:    this.$store.dispatch('xxx')  

获取getters中的方法:   this.$store.getters.xxx

  var store = new Vuex.Store({
    state:{           //vuex中全局共享的数据  在任何一个组件中,都可以使用state中的数据
      cartCount:0     // 通过  this.$store.state.cartCount    获取数据
    }, 
    mutations:{       //修改vuex中全局共享数据    ,修改state中的数据
        increament(state){
          state.cartCount++
        },                    //通过 this.$store.commit('updateCount') 调用mutations中的方法
        updateCount(state,c){
          state.cartCount+=c
        }
    },
    getters:{//获取vuex中全局共享数据  
        getCartCount(state){
           return state.cartCount;
        }
    }
})

 

 

 

 

 

 

 

    

posted @ 2019-08-09 19:44  javascript9527  阅读(159)  评论(0编辑  收藏  举报