vuex详细使用(总结)

末蓝、 2021-07-24 18:07 538阅读 0赞

**vuex各个参数**

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

**VueX的工作流程**  
![vuex工作流程图片][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')

修改至：[怪兽难吃素][Link 1]

文档：[vuex][vuex 1]

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

[vuex]: /images/20210724/653cd2309e7040afa8348d197a4b1ee6.png
[Link 1]: https://www.jianshu.com/p/2e5973fe1223
[vuex 1]: https://vuex.vuejs.org/zh/