Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Vuex状态管理 梳理

const store = new Vuex.Store({ ...options })

------------------------常见问题---------------------------

// Vuex 中更改state, state 根级属性修改需要 setter 中修改,如果是 引用数据,修改其内部 属性 可直接修改

Vuex.Store 构造器选项

  • state选项: 哪些状态

    操作属性:Object | function(函数的类似data,返回一个对象,可重用)

    /*
    ***在 store对象 里面可以全局访问的变量
    *** state,       // 如果在模块中定义则为模块的局部状态
    *** getters,     // 等同于 store.getters
    *** rootState    // 等同于 store.state
    *** rootGetters  // 所有 getters
    *** context      // 包含上面所有,后面提及
    */
    // ----------------state---------------
    state:{
      name : 'lucy'
    }
    或者
    state: ()=>{
      name : 'lucy',
      sex : 'm'
    }
    // -----------------getters---------------
    // 传参 state、context 是为了函数体里面能访问到
    getters:{
      GET_NAME(state){
        return state.name },
      GET_SEX:state=>state.sex
    }
    // -----------------mutations---------------
    mutations:{  //必须时同步函数,因为日志里面需要能跟踪mutations,异步的无法跟踪,actions无需跟踪
      SET_NAME(state,value){
        state.name = value
      },
      SET_SEX(state,value){
        state.sex = value
      }
    }
    // ---------------actions---------------
    actions:{
      uppername(context,value){
        context.commit('SET_NAME',value.name)
        context.commit('SET_SEX',value.sex)
      }
    }
    /*context内容
    *{
    *  state,      // 等同于 `store.state`,若在模块中则为局部状态
    *  rootState,  // 等同于 `store.state`,只存在于模块中
    *  commit,     // 等同于 `store.commit`
    *  dispatch,   // 等同于 `store.dispatch`
    *  getters,    // 等同于 `store.getters`
    *  rootGetters // 等同于 `store.getters`,只存在于模块中
    *}
    */
    // ---------------modules-----------------
    import 子模块B from './XXX'
    modules:{
      子模块A名:{  // 方式1
        state,
        namespaced?,   // 是否使用命名空间
        mutations,
        actions?,
        getters?,
        modules?
      }, 
      子模块B     // 方式2
    
  • mutations选项 :转变状态

    属性:(state总是第一个参数 , payload调用时的传参)。调用时使用 commit

  • actions选项 :多个操作集合。按照规范mutations每次会调用一个函数,actions的作用是状态改变会触发多个函数执行

    属性:操作名function(contxt总是第一个参数 , payload调用时的传参)。调用时使用 dispatch

  • modules选项 :子模块集合。子模块的store对象会被合并到root 的 store 中

    属性:操作名function(contxt总是第一个参数 , payload调用时的传参)。调用时使用 dispatch

  • plugins选项 :一个数组,包含应用在 store 上的插件方法
  • strict选项: boolean 默认false

    Vuex store 进入严格模式,在严格模式下,任何 mutation 处理函数以外修改 Vuex state 都会抛出错误

Vuex.Store实例属性 只读

  • state
  • getters这里的属性值是通过 注册getter时的函数计算得到, 子模块的key为 '子模块名/函数名',根模块为'函数名'

Vuex.Store实例方法

  • commit :提交commit 是唯一更改状态方法 dispatch 内部也是通过commit 完成

    给state添加属性:Vue.set(obj, 'newProp', 123) | state.obj = { ...state.obj, newProp: 123 }

    // ---------------commit----------------
    commit(type: 函数名string,传参payload?: any, 选项options?: Object)  // 方式一
    commit(mutation: 对象格式Object, options?: Object)  // 方式二
    store.commit('increment', {
      amount: 10  })
    store.commit({
      type: 'increment',  // 函数名
      amount: 10  })
    // ---------------dispatch----------------
    dispatch(type: string, payload?: any, options?: Object): Promise<any>
    dispatch(action: Object, options?: Object): Promise<any>
    
  • dispatch:分发action 即去调用actions中的函数, 返回一个promise

组件内的辅助函数

  • mapState:mapState(映射函数map:传参数组Array | 传参对象Object): 返回对象Object
  • //----------------mapState-------------------
    computed: mapState({
      // 方式一 : 箭头函数可使代码更简练
      count: state => state.count,  
    })
    computed: mapState([
      // 方式二 :映射 this.count 为 store.state.count
      'count',state.属性A ,state.属性B
    ])
    computed: {
      // 方式三 :使用对象展开运算符将此对象混入到外部对象中
      ...mapState({
        // ...
      })
    
    // mapState、mapGetters : 由于映射的是属性,所以放在 computed 中
    // mapActions、mapMutations : 映射的是方法,所以放在 method 中
    
posted @ 2021-01-29 15:33  365/24/60  阅读(85)  评论(0编辑  收藏  举报