第七章 vuex专题

一、Vuex安装

一般在创建项目是会选择 Vuex,如果没有选择:

cnpm install vuex  --save

使用:

import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({//开启命名空间
  modules: {
    app,
    errorLog,
    permission,
    tagsView,
    user
  }
});

二、Vuex 构成

2.1 state

说明：储存初始化数据

使用：

this.$store.state.xxxxx

2.2 getters

说明:对state中的成员加工后传递给外界

getters中的方法有两个默认参数

state 当前VueX对象中的状态对象

getters 当前getters对象，用于将getters下的其他getter拿来用

例:

getters:{
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
} 

使用:

this.$store.getters[namespace/getterName] 

2.3 mutations

说明:mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等

mutations方法都有默认的形参：

([state] [,payload])

• state是当前VueX对象中的state
• payload是该方法在被调用时传递参数使用的

使用:

this.$store.commit('mutationName,’payload')

2.4 aciton

说明:由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

• context 上下文(相当于箭头函数中的this)对象
• payload 挂载参数

action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：

1、action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步（视图触发Action，Action再触发Mutation），也可以处理异步的操作

2、action改变状态，最后是通过提交mutation

3、角色定位基于流程顺序，二者扮演不同的角色。

Mutation：专注于修改State，理论上是修改State的唯一途径。

Action：业务代码、异步请求。

使用:

this.$store.dispatch[namespace/actionName] 

2.5 module

最后在对外提供出口的时候，namespaced:true,开启模块化

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
};