vuex的使用笔记

2018年08月19日作者: 国瑞个人博客 470次浏览

vuex作为vue的扩展，功能更加的强大，经过几天的摸索，我才逐步掌握，接下来给大家从头到尾详细分析一波:

首先我们安装vuex，我使用的是vue-cli脚手架工具进行配置使用：

1.基本操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//第一步安装
vue init webpack vuex （拓展插件我只选择了路由【router】）
npm install vuex --save

//第二步新建文件夹store，在里面新建index.js文件接下来引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//定义一个容器
let store = new Vuex.Store({})
export default store

//第三步在main.js中也要引入store文件
import store from "./store"

2.对vuex的基本使用，使用vuex进行数据渲染

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

//第一步在store文件夹中的index.js中写上表明我们定义的数字是100
let store = new Vuex.Store({
state:{
count:100
}

//第二步在视图对应的组件中我们使用vue中的计算属性对数据进行渲染
<template>
<div>
<h2>简易加法计算器</h2>
<div>
<input type="button" value="-" />
<span>{{num}}</span>
<input type="button" value="+" />
</div>

</div>

</template>
<script>
export default {
computed:{
num(){
//拿到vuex中的值
console.log(this.$store.state.count);
return this.$store.state.count;
}
</script>

//现在值是已经可以显示了，为100

3.添加事件，对数据可以进行加减操作

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

//第一步在视图对应的组件中添加事件
<template>
<div>
<h2>简易加法计算器</h2>
<div>
<input type="button" value="-" @click="deHandle"/>
<span>{{num}}</span>
<input type="button" value="+" @click="addHandle"/>
</div>

</div>

</template>
<script>
export default {
computed:{
num(){
//拿到vuex的值
console.log(this.$store.state.count);
return this.$store.state.count;
},

},
methods:{
addHandle(){
//改变状态，提交mutation addIncrement会提交过去 ,下面的含义表示的是触发vuex中定义的事件addIncrement，mutation提交不应该有异步操作的数据
this.$store.commit("addIncrement")
},
deHandle(){
this.$store.commit("deIncrement")
}
}
}

</script>

//第二步在store中的index.js中进行判定（有事件捕获的感觉）
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//定义一个容器
let store = new Vuex.Store({
state:{
count:100
},
mutations:{
//state是一个默认的参数，
addIncrement(state){
state.count+=1;
},
deIncrement(state){
state.count-=1;
}
}
})
export default store

//到这里，一个使用vuex实现加减的效果就实现了

注意：

改变状态，提交mutation addIncrement会提交过去 ,下面的含义表示的是触发vuex中定义的事件

注意：以上为vue-cli2.0版本的，下面为3.0版本的，个人认为3.0的比2.0的要简单一些

简单的加减

1、编写组件，搭建路由

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

//router
export default new Router({
//mode: 'history', //没有#模式
routes: [{
path: '/',
name: 'data',
component: data
}

]
})

//template
<template>
<div>
<button @click="handleIncrement">增加</button>
<input type="number"
@change="changes"
v-model="count">
<button @click="handleDecrease">减少</button>

</div>

</template>
<script>
export default {
data () {
return {
}
},
methods: {
//监听数据的呀
changes () {
console.log(1);
},
handleIncrement () {
this.$store.commit('increment');
},
handleDecrease () {
this.$store.commit('decrease');
}
},
computed: {
count () {
return this.$store.state.count
}
}

}
</script>

//app.vue
<template>
<div id="app">
<router-link to="/">vuex数据展示</router-link>
<router-view/>
</div>
</template>

2、在store中的mutations编写代码实现加加减减的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default new Vuex.Store({
state: {
count: 0
},
mutations: { //this.$store.commit('方法的名称','按需传入唯一的参数')
increment(state) {
state.count++
},
decrease(state) {
state.count--
}
},
getters: { //this.$store.getters.***

}
})

3、在dada.vue组件中使用commit调用加减函数

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
34
35
36
37

<template>
<div>
<button @click="handleIncrement">增加</button>
<input type="number"
@change="changes"
v-model="count">
<button @click="handleDecrease">减少</button>

</div>

</template>
<script>
export default {
data () {
return {
}
},
methods: {
//监听数据的呀
changes () {
console.log(1);
},
handleIncrement () {
this.$store.commit('increment');
},
handleDecrease () {
this.$store.commit('decrease');
}
},
computed: {
count () {
return this.$store.state.count
}
}

}
</script>

注意：使用this.$store.state.count可以直接在任何组件中获取到改属性的值

使用vuex获取数据进行过滤操作

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

//在store中定义数据为 list:
export default new Vuex.Store({
state: {
list: [1, 5, 8, 10, 30, 50]
}
}
})

//在data.vue组件中定义
<template>
<div>
{{list}}
</div>

</template>
<script>
export default {
data () {
return {
}
},
methods: {
},
computed: {
list () {
return this.$store.state.list.filter(item => item < 10);

}
}

}
</script>

但问题在于，如果还有其他的组件也需要过滤后的数据时，就得把computed的代码完全复制一份，并且需要修改过滤方法时，每个用到的组件都得修改，如果能够将computed的方法也提取出来就方便很多了，getters就是用来做这个事的

使用getters来对数据进行筛选（filter）

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
34
35
36
37
38

//在store中定义数据为 list:
export default new Vuex.Store({
state: {
list: [1, 5, 8, 10, 30, 50]
},
getters: { //this.$store.getters.***
filteredList: state => {
return state.list.filter(item => item < 10)
}

}
}
})

//在data.vue组件中定义
<template>
<div>
{{list}}
</div>

</template>
<script>
export default {
data () {
return {
}
},
methods: {
},
computed: {
list () {
return this.$store.getters.filteredList;
}
}

}
</script>
这种用法与组件的计算属性非常的像。getter也可以依赖其他的getter，把getter作为第二次参数，比如在写一个getter，计算出list过滤后的结果的数量

这种用法与组件的计算属性非常的像。getter也可以依赖其他的getter，把getter作为第二次参数，比如在写一个getter，计算出list过滤后的结果的数量

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
34
35
36
37
38
39
40

//store中
getters: { //this.$store.getters.***

filteredList: state => {
return state.list.filter(item => item < 10)
},
listCount: (state, getters) => {
return getters.filteredList.length;
}
}
//data.vue中

<template>
<div>
{{list}}
{{listCount }}
</div>

</template>
<script>
export default {
data () {
return {
}
},
methods: {
},
computed: {
list () {
return this.$store.state.list.filter(item => item < 10);
},
listCount () {
return this.$store.getters.listCount;
}
}

}
</script>

这里我们可以发现，传入的第二次参数getters其实就是当前的getters中包含的所有的方法

actions的使用

前言：mutation里不应该异步操作数据，所以有了actions选项。action与mutation很像，不同的是action里面提交的是mutation，并且可以异步操作业务逻辑。action在组件内通过$store.dispatch触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//在store.js中
export default new Vuex.Store({
state: {
count: 0,
list: [1, 5, 8, 10, 30, 50]
},
actions: {
increment(context) {
context.commit('increment');
}
}
})

//data.vue中
methods: {
//监听数据的呀
changes () {
console.log(1);
},
handleIncrement () {
this.$store.dispatch('increment');
}
}

感觉有点多次一举，因为可以直接通过mutation加以实现的呀，没必要通过action中转一次，但是加了异步就不一样了，我们用定时器在一秒后提交mutation,示例代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//store.js中的action中
asyncIncrement(context, callback) {
setTimeout(() => {
context.commit('increment');
callback()
}, 1000)
}

//data.vue中
methods: {
//handleAsyncIncrement 这个名字为点击事件名称，放置在+1的按钮上
handleAsyncIncrement () {
this.$store.dispatch('asyncIncrement', () => {
console.log(this.$store.state.count)
})
}
}

mutations、actions看起来很相似，可能会觉得不知道该用哪个，但是Vuex很像是一种与开发者的约定，所以涉及改变数据的，就是用mutations，存在业务逻辑的，就用actions，至于将业务逻辑放在action里还是Vue组件里完成，就需要更具实际场景拿捏了。

Vuex最后一个知识点：modules

前言：modules用来将store分隔到不同的模块，当你的项目足够大的时候，store里面的state、getters、actions会非常多，都放在一个store.js中显得不太友好，所以写入到不同的文件中，每个module拥有自己的state、getters、actions、mutations，二期可以多层嵌套

百度已收录

点击快速分享：

以上就是国瑞前端个人博客带来的是《vuex的使用笔记》，感谢您的观看！

如果没有特殊的说明，本文即为国瑞前端博客原创(www.huanggr.cn)，欢迎读者转载并保留本站版权！https://www.huanggr.cn/457.html

「专业前端博客，如果觉得我的文章对您有用，请帮助本站成长」

赞( 22 ) 打赏