前言
官方文档讲vuex讲的很清楚了，本文用于总结vuex的简单使用
简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
优点
1.Vuex的状态存储是响应式的：当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。
Vuex的核心
vuex由以下几部分组成：
- state
- mutations
- getters
- actions
- modules
state里面就是存放的我们上面所提到的状态
mutations就是存放如何更改状态
getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态,就是是store的计算属性。
actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。
modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。
demo.png
如何解释Vuex
state
假设我们需要管理的数据有以下这些
state:{
list:[],
showmsg:true,
msg:"给组件的消息"
}
在组件中获取{{msg}}方式：
export default {
computed: {
msg(){
return this.$store.state.msg;
}
}
};
某个时候，某个组件中，我们需要给state中的list添加一个数据，我们肯定得想办法去干成这件事。vuex中就规定了我们必须通过commit mutations中的方法来做这件事。
mutations
state:{
list:[],
showmsg:true,
msg:"给组件的消息"
}，
mutations:{
//add会接受 state作为第一个参数，第二个是自定义传参
add(state,data){
state.list.push(data);
}
}
1.字符串参数add官方说是type，其实就是注册的事件名
2.可以是单个参数
3.如果是多个参数，我们则用对象放入，否则会报错
我们在提交commit时候，字符串参数add,就是对应在 mutations中的add。
一般通过方法或钩子触发，例如：
methods: {
getVal(event) {
//获取当前的按键的值
let value = event.target.dataset.value;
//通过commit提交一个名为increment的mutation
this.$store.commit("add", value);
}
}
getters
某个时间，某个组件我们需要获得list中字符串长度大于10的所有数据，vuex中允许我们通过getters来获取：
state:{
list:[],
showmsg:true,
msg:"给组件的消息"
}，
mutations:{
//add会接受 state作为第一个参数，第二个是自定义传参
add(state,data){
state.list.push(data);
}
},
getters:{
fiterList(state){
let len=state.list.length,
newList;
for(let i=0;i<len;i++){
let element=state.list[i];
element.length>10>newList.push(element):null;
}
}
}
在组件中获取{{list}}方式：
export default {
computed: {
list(){
return this.$store.getters.fiterList;
}
}
};
actions
某个时间，某个组件需要我们需要在事件发生2秒后再向list中添加数据，这个时候我们必须用actions，还记得上面我们提到的吗，只有通过actions处理异步问题:
state:{
list:[],
showmsg:true,
msg:"给组件的消息"
}，
mutations:{
//add会接受 state作为第一个参数，第二个是自定义传参
add(state,data){
state.list.push(data);
}
},
getters:{
fiterList(state){
let len=state.list.length,
newList;
for(let i=0;i<len;i++){
let element=state.list[i];
element.length>10>newList.push(element):null;
}
}
} ,
actions:{
add({commit,state},data){
setTimeout(function(){
//通过commit mutations中的方法来处理
commit("add",data);
},2000);
}
},
然后我们就在组件里这么调用就可以了:
methods: {
getVal() {
let data= 26;
//1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
this.$store.dispatch('add',{data})
}
}
module
当代码量不断增多，这个容器的状态和Mutations，actions，getters都太多了时，我们可以把它们按自己的需求进行分类，分成几个module，每个module和上面一样由state，mutations，actions，getters组成：
import a from "./a.js"
import b from "./b.js"
const tore=new Vuex.store({
moudles:{
a,
b
}
})
辅助函数
vuex提供了辅助函数处理庞大的vuex数据，mapState，mapGetters，mapMutations，mapActions，实际就是把state、getters、mutations、actions整合成一个数组，一次性返回
注：mapState，mapGetters返回的是属性，所以混入到 computed 中，mapMutations，mapActions返回的是方法，只能混入到methods中
mapState(state辅助函数)
当我们的组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余，为了解决这个问题，我们可以使用mapState的辅助函数来帮助我们生成计算属性。mapState函数返回的是一个对象。
1、引入：
import { mapState } from 'vuex
2、在computed属性中来接收state中的数据 接收方式有2种（数组和对象，推荐对象）
1.computed:Vuex.mapState(["属性"])
把state中的数据通过mapState映射到computed组件身上
2.computed:Vuex.mapState({
key:state=>state.属性 //优点：1本身key值是别名
//要的是val的值，key的值a 和 val="a"一样就行，随意写。
//减少state里面长的属性名。
//2可以在函数内部查看state中的数据
// 数组方式的话，必须按照state中的属性名
})
3、如果自身组件也需要使用computed的话，通过解构赋值去解构出来
computed:{
...Vuex.mapState({
key:state=>state.属性
})
}
mapAcions(使用mapActions辅助函数将组件的methods映射成store.dispatch调用)
methods:{
...Vuex.mapActions({
add:"handleTodoAdd", //val为actions里面的方法名称
change:"handleInput"
})
}
//直接代用add和change方法就行，不过要记得在actions里面做完数据业务逻辑的操作
之前我们还需要这样写一大串函数调用，
// methods: {
// handleInput(e){
// let val = e.target.value;
// this.$store.dispatch("handleInput",val )
// },
// handleAdd(){
// this.$store.dispatch("handleTodoAdd")
// }
// }
mapMutations(使用mapMutations辅助函数将组件中的methods映射为store.commit调用)
methods: {
// 将this.tips映射成 this.$store.commit('tips')
...mapMutations(['tips'])
}
mapGetters(把getters属性映射到computed身上)
computed: {
...mapGetters([
'oneGetter',
'anotherGetter'
])
}
网友评论