zoukankan      html  css  js  c++  java
  • 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;
            }
        }
    })

        

  • 相关阅读:
    有序向量
    无序向量
    设计模式入门
    策略模式
    面向对象相关知识点
    MySQL数据库知识培训
    数据库业务规范
    go最小路径
    go求质数
    CSS3
  • 原文地址:https://www.cnblogs.com/javascript9527/p/11329259.html
Copyright © 2011-2022 走看看