vuex详细使用(总结)

vuex各个参数

• state 存放状态
• mutations state成员操作
• getters 加工state成员给外界
• actions 异步操作
• modules 模块化状态管理

VueX的工作流程

• state 使用：

HTML中

<h1>{{ $store.state.name }}</h1>

js中

console.log(this.$store.state.name)

• mutations 使用：

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。state无法直接操作，只能用mutations操作
单个值提交时:

this.$store.commit('edit',15)

当需要多参提交时，推荐把他们放在一个对象中来提交:

this.$store.commit('edit',{age:15,sex:'男'})

接收挂载的参数：

edit(state,payload){
    state.name = 'jack'
    console.log(payload) // 15或{age:15,sex:'男'}
}

另一种提交方式

this.$store.commit({
    type:'edit',
    payload:{
        age:15,
        sex:'男'
    }
})

Vue.set 为某个对象设置成员的值，若不存在则新增

Vue.set(state,"age",15)

Vue.delete 删除成员

Vue.delete(state,'age')

• 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.fullInfo

• actions 使用

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

Actions中的方法有两个默认参数:
context 上下文(相当于箭头函数中的this)对象
payload 挂载参数

actions:{
    aEdit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}

组件中调用：

this.$store.dispatch('aEdit',{age:15})

• Models 使用
  当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

models:{
    a:{
        state:{},
        getters:{},
        ....
    }
}

组件内调用模块a的状态：

this.$store.state.a

而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法：

this.$store.commit('editKey')
this.$store.dispatch('aEditKey')

修改至：怪兽难吃素

文档：vuex

评价：我觉得作者"怪兽难吃素"，总结的比官网好