组件是Vue最强大的功能之一,而组件实例的作用域是相互独立的,意味着不同组件之间的数据是无法相互使用。组件间如何传递数据就显得至关重要,这篇文章主要是介绍vuex。尽量以通俗易懂的实例讲述这其中的差别,希望对小伙伴有些许帮助。

一、vuex 是什么?

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

二、什么是“状态管理模式”?

一个简单的 Vue 计数应用开始:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})

这个状态自管理应用包含以下几个部分:

state,驱动应用的数据源;
view,以声明方式将 state 映射到视图;
actions,响应在 view 上的用户输入导致的状态变化。
111
state 的数据会在 view 上显示出来,用户会根据 view 上的内容进行操作,从而触发 actions,接着再去影响 state(vue 是单向数据流的方式驱动的)。

当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏。下面的图,是把组件的共享状态抽取出来,以一个全局单例模式管理。

222

三、核心概念

1. state

state:页面状态管理容器对象。集中存储Vue components中data对象的零散数据,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取。

1
2
3
4
<div>
{{ $store.state.count }}
</div>
console.log(this.$store.state.count)

2. getters

getters:vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。(getters从表面是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。getters就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。)

定义getter:

1
2
3
4
5
getters: {
done(state) {
return state.count + 1;
},
}

3. mutations

mutations:更改 vuex 的 store 中的状态的唯一方法是提交 mutation。vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

1
2
3
4
5
6
7
8
9
10
11
const store = new vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})

组件通过commit提交mutations的方式来请求改变state

1
this.$store.commit('increment')

提交载荷(Payload)
mutations方法中是可以传参的,具体用法如下:

1
2
3
4
5
6
7
  mutations: {
// 提交载荷 Payload
add(state, n) {
state.count += n
}
},
this.$store.commit('add', 10)

###### 4.Action
Action:类似于 mutation,不同在于Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const store = new vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})

不同于mutations使用commit方法,actions使用dispatch方法。

1
this.$store.dispatch('incrementAsync')

context
context是与 store 实例具有相同方法和属性的对象。可以通过context.state和context.getters来获取 state 和 getters。
以载荷形式分发

1
2
3
4
5
6
incrementAsyncWithValue (context, value) {
setTimeout(() => {
context.commit('add', value)
}, 1000)
}
this.$store.dispatch('incrementAsyncWithValue', 5)

5.Module

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

模块的局部状态
对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const moduleA = {
state: { count: 0 },
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}

vuex计数器的例子:
在src目录下创建一个store文件夹。

store/store.js

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
import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const store = new vuex.Store({
state: {
count: 0,
show: ''
},
getters: {
counts: (state) => {
return state.count
}
},
mutations: {
increment: (state) => {
state.count++
},
decrement: (state) => {
state.count--
},
changVal: (state, v) => {
state.show = v
}
}
})
export default store

state就是我们的需要的状态,状态的改变只能通过提交mutations,例如:

1
2
3
increase() {
this.$store.commit('increment')
}

带有载荷的提交方式:

1
2
3
changObj () {
this.$store.commit('changVal', this.obj)
}

载荷也可以是一个对象,这样可以提交多个参数。

1
2
3
4
5
changObj () {
this.$store.commit('changVal', {
key:''
})
}

在main.js中引入store.js

1
2
3
4
5
6
7
8
9
10
import store from './store/store'
export default new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})

在组件中使用
在组建可以通过$store.state.count获得状态
更改状态只能以提交mutation的方式。

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
<div class="store">
<p>
{{$store.state.count}}
</p>
<button @click="increase"><strong>+</strong></button>
<button @click="decrease"><strong>-</strong></button>
<hr>
<h3>{{$store.state.show}}</h3>
<input
placeholder="请输入内容"
v-model="obj"
@change="changObj"
clearable>
</input>
</div>
</template>
<script>
export default {
data () {
return {
obj: ''
}
},
methods: {
increase() {
this.$store.commit('increment')
},
decrease() {
this.$store.commit('decrement')
},
changObj () {
this.$store.commit('changVal', this.obj)
}
}
}
</script>

转载请保持原始链接

原始链接: https://ru23.com/note/caef00ab.html