首页 计算机科学 前端 杂谈

# Vuex 的学习心得

1.getters 来访问属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const store= new Vuex.Store({
state:{
num:1,
todos:[
{id:1,text:"   asdasd",done:true},
{id:1,text:"   asdasd",done:false},
]
},
getters:{
donetodos:state=>{
return state.todos.filter(todo=>todo.done)
}
}
})

如何说你想要调用 getters 里面定义的获取属性的方法可以试着使用下面的代码块。

1
$store.getters.donetodos

还可以简化访问方法的写法，注意还需要再 computed 里面去写方法，记得使用展开符号

1
2
3
computed:{
...mapGetters(["donetodos"])
}

1
2
3
//访问变量可以使用变量名来访问，如复制操作
let arr=[]
arr=donetodos

2、mutations 用来修改数据，第一个状态参数是 state，第二个参数是载荷 payload

  • 第一个参数的使用状态 state

1
2
3
4
5
mutations：{
increment:(state)=>{
    state.num+=1
}
}

在 vue 页面中要调用 store.js 里面定义的 muations 方法，可以使用 *this.$store.commit ("方法名")* 来调用

1
this.$store.commit("increment",{count:10})

  • 第二个参数的使用载荷 payload

1
2
3
4
5
mutations：{
increment:(state,payload)=>{
    state.num+=payload.count
}
}

如何还需要去简化一下方法的提交

1
...mapMutation(["方法名"//例如"increment"])

如果是要数据传参的可以在 template 在 html 标签绑定的函数小括号里面闯入自己想要传入的 payload 载荷，例如：

1
<div @onclick="increment({count:10})"></div>

3、Action

  • actions 用于提交异步的操作功能类似于 redux 里面的 thunk 中间件
  • actions 可以提交 mutations，不直接更改数据的状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const store= new Vuex.Store({
state:{
num:1,
todos:[
{id:1,text:"   asdasd",done:true},
{id:1,text:"   asdasd",done:false},
]
},
getters:{
donetodos:state=>{
return state.todos.filter(todo=>todo.done)
}
},
    mutations：{
increment:(state)=>{
    state.num+=1
}
},
    actions:{
        asyncincrement:(context,payload)=>{
            setTimeout(()=>{
                context.commit("increment",payload)
},3000)
        }
    }
})

actions 里面定义的方法参数 context 是全局上下文，可以用来提交 commit 来使用到 mutations 里面的方法，进而来修改 store 里面数据的状态。

在 actions 里面定义的有两个参数

  • 第一个参数是 context 全局上下文，相当于是 store 对象。
  • 第二个参数是载荷 payload，用于传递参数

调用的简单方法

1
this.$store.dispatch("asyncincrement",payload)

​ 简化之后的操作不需要再定义方法然后去调用 dispatch

1
...mapActions(["asyncincrement"])

​ 传递参数，在 vue 的 template 里面 html 标签绑定的方法，里面传入 payload 参数

1
<div @onclick="asyncincrement({count:10})"></div>

4、Module

简化共享数据使用分模块

下面来显示案例 user Module,shoplist Module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const store= new Vuex.Store({
modules:{
user:{
state:{
islogin:false
}
},
    cart:{
	state:{
        list:["苹果","安卓","香蕉"]
    }
    }

}
})

对 module 里面的属性使用

1
2
3
4
<div >
    {{$store.user.islogin}}
    {{$store.cart.list}}
</div>

在 module 里面定义的方法是不区分模块的。默认都是全局的，除非是加上 namespace

1
在modules对象里面加入属性namespace:true

5、全局的 getters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const store=new Vuex({
	//全局属性
    state:{},
    //全局getters
    getters:{
       count:state=>state.user.count
    },
    mutations:{},
    actions:{},
    modules:{
        user:{
            state:{
                count:10
            },
            getters:{
				increment:(state)=>{return state.count}
            },
            mutations:{
                UpdateCount:(state)=>{
                    state.count+=1
                }，
                actions:{
              asyncUdate=(context)=>{
              setTimeout(()=>{
					context.commit("UpdateCount")
        })
        }
            }
            }
        }
    },
    
})

6、vuex 拆分模块下的 mapMutations 如何使用

1
2
3
4
5
6
7
methods:{
...mapMuations["user/UpdateCount"]
    update(){
        //调用固定格式
        this['user/UpdateCount']()
    }
}

7、vuex 差分模块下的 mapActions 如何 shiyong

1
2
3
4
5
6
methods：{
...mapActions(["user/asyncCount"]),
    asyncupdate(){
        this["user/asyncCount"]()
    }
}

8、辅助函数 createNameSpaceHelpers 基本的使用方法（简化代码量）

1
2
3
4
5
6
7
const {mapMutations,mapActions,mapGetters}=createNameSpaceHelpers("user"//"命名空间名")
method:{
...mapMuations["UpdateCount"]
    update(padload){
        //调用固定格式
        this['UpdateCount'](padload)                                                              
              }