vuex学习笔记

VUEX

是一个状态管理模式,可以集中式存储和管理组件的状态。

组件使用store里面的state作数据展示,通过dispatch action来处理异步业务逻辑,然后commit mutations处理同步业务逻辑并且更新state

Store

const store = {
  state,
  mutaions,
  getters,
  actions,
  modules
}

State

通过在跟组件中注册store,即new Vue({store}),该store实例会注入到根组件下的所有子组件中,子组件通过this.$store.state去访问属性。

// 可以通过mapState来帮我们生成计算属性
import { mapState } from 'vuex'
export default {
  computed:{
    aaa,
    // 自己本来有computed的属性
    ...mapState({
      count:state => state.count,
      // 也可以传 'count' 等同于 'state => state.count'
      'count'
    }),
    ...mapState([
      'xxx',
      'yyy'
    ])
  }
}

Getters

当多个组件需要一种清洗和过滤后的数据的时候,可以编写getters,即处理数据格式的一种方法。

// 定义一个getters,里面有个sum
const getters = {
  // 也可以接收一个getters作为参数
  sum:( state,getters ) => {
    return state.a + state.b;
  }
}
// 使用getters
computed:{
  // 同样使用拓展运算符将 getters 混入 computed 对象中
  xxx,
  ...mapGetters([
    'aaa',
    'bbb'
  ])  
}

Mutations

更改Vuex中的state状态的唯一方法是commit mutation,然后在mutation中操纵state改变状态。

// 定义
const mutations = {
  // 可以传入额外的参数n
  [ADD](state,obj){
    state.count += obj.n;
  }
}

// 一般使用常量替代 mutation 事件类型
const ADD = 'ADD'

//调用,type对应方法名, 或者commit('add',10)
store.commit({
  type:'add',
  n:10
}) 

mutation必须是同步函数,也就是说所有异步请求应该都放在action

// 使用
export default {
  methods:{
    ...mapMutations([
      // 映射 this.aaa() 为 this.$store.commit('aaa')
      'aaa'
    ])
  }
}

Action

action类似mutation,但是actioncommit mutation,而不是直接改变状态,并且action可以进行异步操作。

const actions = {
  //这里需要注意,入参的context是一个modules,不是Store,有store实例的相同方法和属性
  aaa(context,n){
    // 在action中提交一个type为aaa的mutation
    context.commit({type:'mutation',n:n})
  }
}

// 调用
store.dispatch({type:'aaa',n:10}); //dispatch('aaa',n)
// 使用
export default {
  methods:{
    ...mapActions([
      // 映射 this.aaa() 为 this.$store.dispatch('aaa')
      'aaa'
    ])
  }
}

Modules

一个很大的单页项目,如果所有状态都集中在一个Store上,那么这个Store就会很大,所以将store分割模块,每个模块拥有自己的state,mutation,action,getters.

const moduleA = {
  state,
  actions,
  mutations
}
const moduleB = {
  state,
  actions,
  mutations
}

const Store = new Vuex.Store({
  modules:{
    moduleA,
    moduleB
  }
})

Store.state.moduleA // -> moduleA 的状态

规则

  • 应用层级的状态应该集中到单个 Store 对象
  • 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的
  • 异步逻辑都应该封装到 action 里面
  • 对大型项目,需要把 Vuex 相关代码分割到模块中

推荐阅读更多精彩内容

  • Vuex 是什么? ** 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式**。它采用集中...
    Rz______阅读 1,476评论 1 10
  • vuex 状态管理器 作为应用中所有组件的中央储存 只能以预定的方式去操作状态 把所有组件共享的状态抽取出来作为全...
    一只大椰子阅读 472评论 0 1
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,136评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 2,156评论 0 6
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 6,230评论 4 111