Bootstrap

在vue项目中如何利用vuex进行数据存储?

首先要理解vuex的两种数据流:

异步时:数据流向,同步则无dispatch和actions,下面以异步的完整流向为例

componentsA --> dispatch --> actions --> commit --> mutations --> state --> render

--> componentsB

假设现有组件A,需要传数据(这里的数据可以是值,对象...)给vuex保管

在组件A的某个函数被调用时,把值通过dipatch传到actions

具体代码为

this.$store.dispatch("actions中的方法名",传递的数据)

传递之后在actions中的方法名中需要进行commit,提交给mutations

具体代码为

//注意这里的方法名必须与dispatch中的方法名保持一致
//这里的context,相当于是个简版的$store,可以自己打印去比较
const actions = {
  方法名(context, playload) {
    //console.log(context)   
    context.commit('方法名', playload)
  }
}

提交完commit,就意味着可以在mutations中修改state中的值了,state中的值自己去定义

//有些刚用的铁铁可能不明白这个playload
//这里的第二个参数playl
;