vuex

5种状态：

• state  -> 基本数据
• getters ->  从基本数据派生的computed:{
      ...mapState(['repeat','nowIndex'])
  }同步
• actions  -> 提交更改数据的方法，包裹mutations，异步
• modules -> 模块化Vuex

state

• 先在vuex中声明数据
• 组件中获取state中的数据

computed:{
    count:function()
        return this.$store.state.count;
    }
}

computed:{
    ...mapState(['repeat','nowIndex'])
}

getters

• 定义派生数据

getters:{

     countDouble:function(state){

          return state.count*2;

    }

}

• 组件获取

computed:{

    doubleCount:function(){

         return this.$state.getters.countDouble;

    }

}

computed:{

    ...mapGetters([]}

}

mutations

• mutations 是 vuex中修改state状态的唯一方法
• mutations是同步的，异步用actions
• vuex中声明mutations

mutations:{

    increase(state){

        state.count++;

    }

}

• 组件中methods中引用mutations

methods:{

    ...mapMutations([])

}

• 组件使用mutations

this.$store.commit('increase')

actions

• 提交异步的mutations，而不是直接修改state
• 可以包含任意的异步操作
• actions接受一个与store实例具有相同方法和属性的context对象。

声明

actions:{

    increase(context){

        setInterval(function(){

            context.commit('increase')

        },1000)

    }

}

组件中引用

methods:{

    ...mapState([])

}

分发actions

store.dispatch('increase')

modules

• 是每个模块拥有自己的state,mutations,getters,actions,modules
• actions->context.state是局部状态
• context.rootState才是总状态