Vuex | 易学教程

Vuex的概念

公共的状态管理模式
一种最好的非父子组件传值的方案

安装

cnpm install vuex -S

Vuex中常用的配置项

vuex的基本配置框架
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);
//vue配置 公共的内存空间
const store=new Vuex.Store({
    state,
    actions,
    mutations,
    getters,

})
export default store;

state：存储公共的状态

当组件需要访问state中的数据的时候通过this.$store.state.属性进行访问。

//配置文件中
let state={
    //n:10
    list:[],
    inputVal:"",
}

//使用时
<input type="text" :value="$store.state.inputVal" @input="handleChange($event)">

actions：用来处理异步数据(当vue中的数据是通过异步获取的时候，那么必须要经历actions这个配置项)，

同步时可直接跳过这步直接使用commit触发mutations中的方法this.$store.commit(“”)
actions里面的每一个函数都会有一个参数，这个参数是一个对象，对象中有一个commit方法，这个方法用来触发mutations里面的方法。

let actions={
   handleActionsChange({commit},params){
       commit("handleMutationsChange",params);
   },
   handleActionsAdd({commit}){
       commit("handleMutationsAdd");
   },
   handleActionsDel({commit},index){
       commit("handleMutationsDel");
   }
}

mutations：用来修改state中的数据，state里面的参数只能在mutations这个配置项中修改。

mutations里面的每一个函数都会有一个参数，这个参数就是state，用来修改state中的数据

let mutations={
    handleMutationsChange(state,params){
        //console.log(state);
        state.inputVal=params;
    },
    handleMutationsAdd(state){
        state.list.push(state.inputVal);
    },
    handleMutationsDel(state,index){
        state.list.splice(index,1);
    }
}

getters：计算属性(getters与组件中的computed很类似)

getters中的函数依赖于state中属性，当state中的属性发生了改变后就会触发getters里面的方法

let getters={
    len(state){
        return state.list.length
    }
}

modules：多人协作的时候，防止变量和方法冲突

modules里面的的属性都是一个小型Vuex。Vuex里面有的配置项，子模块中也都会有。
另外需要注意的是导出模块的时候切记加一个namespaced:true，实现Vuex模块私有化。
state中的
当vuex中的方法名和子模块中的函数名冲突时触发这个函数会默认触发vuex中的函数，如果需要触发子模块中的函数时使用一下方法
- ```
  this.$store.commit("num/handle");
  //在函数名前面加上子模块的名称即可
```

//modules模块的编写

let state={

}

let actions={

}

let mutations={

}

let getters={

}

export default{
    state,
    actions,
    mutations,
    getters,
    namespaced:true  //vuex模块私有化
}

在vuex中引入子模块

import num from "./num"
import todo from "./todo"

const store=new Vuex.Store({
    modules:{
        num,
        todo
    }

})

dispatch：触发actions里面的方法

参数1：函数名称
参数2：需要传递的参数

 methods:{
   handleChange(e){
     let val =e.target.value;
     this.$store.dispatch("handleActionsChange",val);
   },
     handleAdd(){
       this.$store.dispatch("handleActionsAdd")
     }
 }

commit：触发mutations里面的方法

参数1：函数名称
参数2：需要传递的参数

Vuex数据传递的流程

当组件想要修改state中的数据时，需要调用dispatch来触发actions这个配置项里面的函数。当actions里面对应的函数触发后调用commit这个函数触发mutations这个配置项里的函数，mutations这个配置项是专门用来修改state中的数据。当mutations里面的函数触发后state中的数据就会被修改，因为数据是响应式的，因此组件的数据也会发生变化。

辅助函数

mapState

引入mapState：import {mapState} from “vuex”
mapState必须将数据映射到computed身上

//渲染时
<h2>{{a}}</h2>
<h2>{{b}}</h2>
<h2>{{c}}</h2>
//配置
let state={
    a:1,
    b:2,
    c:3
}

//数组方式
computed:mapState(["a","b","c"])
//对象的方式
computed:mapState({
  a:state=>state.a,
  b:state=>state.b,
  c:state=>state.c
})
//使用对象展开运算符
computed:{
  ...mapState({
    a:state=>state.a,
    b:state=>state.b,
    c:state=>state.c
  })
}

mapActions

引入mapActions：import {mapActions} from “vuex”
mapActions必须将方法映射到methods身上


let actions={
  handleAlert({commit}){
      alert(1);
  }
}

//数组的方式
<button @click="handleAlert()">点击弹出1</button>
methods:mapActions(["handleAlert"])

//对象的方式
<button @click="fn()">点击弹出1</button>
methods:mapActions({
  fn:"handleAlert" //key名可以随意写
})

//对象展开
methods:{
  ...mapActions({
    fn:"handleAlert",
  })
}

mapMutations

引入mapMutations：import {mapMutations} from “vuex”
mapMutations必须将方法映射到methods身上

let mutations={
    handleAdd(state){
        state.a++;
    }
}

//数组的方式
<button @click="handleAdd()">点击弹出1</button>
methods:mapMutations(["handleAdd"]),

//对象的方式
<button @click="handleAdd()">点击弹出1</button>
methods:mapMutations({
        handleAdd:"handleAdd",
    })

//对象展开
methods:{
  ...mapMutations({
    handleAdd:"handleAdd",
  })
}

mapGetters

引入mapGetters：import {mapGetters} from “vuex”
mapGetters必须将方法映射到computed身上

//渲染时
<h2>getters--{{count}}</h2>

//配置里
let getters={
    count(state){
        return state.a+10
    }
}
//数组方式
computed:mapGetters(["count"]),

//对象的方式
computed:mapGetters({
  count:"count"
})
//使用对象展开运算符
computed:{
  ...mapState({
    a:state=>state.a,
    b:state=>state.b,
    c:state=>state.c
  })，
  ...mapGetters({
    count:"count",
  })
}

来源：CSDN

作者：clqxmt

链接：https://blog.csdn.net/weixin_43755513/article/details/103648844

标签

vuex