Vuex入门简单易懂系列(一)

49次阅读

共计 4009 个字符,预计需要花费 11 分钟才能阅读完成。

在 学习 vue 开发中,组件通信一直是一大痛点。当项目是很简单的 SPA 或者多入口项目时,可以靠着 vue 自带的 prop/$emit 进行组件通信;规模再大一些,可以搭配使用 bus 总线进行兄弟组件通信;项目再大一些,出现更复杂的组件关系时,复杂的组件通信可以让你写得怀疑人生。万幸的是,vue 官方出品了 vuex,通过全局式的状态管理,解决了这一痛点。虽然 vuex 很好用,但是,很多小伙伴和我吐槽 vuex 的文档和 vue-ssr 的文档一样,让人看得一脸懵逼。
安装并引入
正常情况下,我们使用 vue-cli3 生成项目时,可以选择集成 vuex 到项目中。此时,vue-cli3 会自动安装 vuex,并在 src 文件夹下生成 store.js 完成 vuex 的引入和配置。但是,很多同学并没有使用 vue-cli3 或者生成项目时没有选择集成 vuex。此时,就只能手动安装并引入 vuex 了。
安装
由于 vuex 是用于全局状态管理的,所以,它不仅仅作用于开发环境,而且还要用于生产环境。显而易见,安装 vuex 应该使用 -S 即 –save 命令。npm install vuex -S
引入
类似于 vue-cli3 生成的项目,我们在 src 文件夹下新建 store.js,并在其中写入:
// store.js
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
export default new Vuex.Store({})
然后,我们只需要在 vue 实例中引入 store.js 中的 Vuex.Store 实例即可:
// main.js
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’

Vue.config.productionTip = false

new Vue({
router,
// 引入 store
store,
render: h => h(App)
}).$mount(‘#app’)
Vuex 的使用
完成了 vuex 的安装和引入,接下来我们进入 Vuex 的使用。vuex 中有三要素:state,mutation 以及 action。它们之间的关系可以用官网那张著名的图来表示:

重点来了(State)
简单来说,state 表示状态,类似于 vue 中的 data(其实本质上就是差不多的,vuex 在 vue 的 beforeCreate 钩子中将 state 混入进 data)。但是,它们又有很大的不同:在使用者看来,state 是全局的,这得益于 vuex 的设计理念——单一状态树。这些我将在后几篇文章中详细,现在我们只需要知道 state 是类似于全局下的 data。接下来我们通过一个简单例子来感受下 state:首先,我们需要修改 store.js 文件,配置 state。可以看到,我们在生成 Vuex.Store 实例时传入了实例化选项对象,对象包含一个 state 属性,state 对象的属性就是我们定义的全局状态。此时,我们定义了一个全局状态——count,并将其的初始值设为 1。
// store.js
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
// 添加 state
state: {
count: 1
}
})
接下来,我们需要在组件中引用 count,由于它是全局状态,我们可以在任何一个组件中使用。为了展示其威力,我们在两个不同的组件中使用它。首先我们在 App.vue 中使用它:在模板中,我们使用 $store.state.count 引入该全局状态,没错,使用它就是那么简单,只需要 以 $store.state.key 的形式调用。
// App.vue
<template>
<div id=”app”>
<div id=”nav”>
{{$store.state.count}}
<router-link to=”/”>Home</router-link> |
<router-link to=”/about”>About</router-link>
</div>
<router-view/>
</div>
</template>
可以发现,Home 前多出了一个 1,这代表着我们成功引入了全局状态 count。接下来我们在 Home.vue 的子组件 HelloWorld.vue 中引入 count。相同的引用方式:$store.state.count
// HelloWorld.vue
<template>
<div class=”hello”>
{{$store.state.count}}
</div>
</template>
可以发现,success。
Mutation
但是,上面的示例有个问题,那就是全局状态是静态的。如果在实际应用场景中,一般来说,会经常更改状态。有的同学会说,我们直接在方法中修改 this.$store.state.key 的值不就行了吗?不好意思,当然是不行的。state 和 data 的另一大区别在于,你不能直接改变 state。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。简而言之,我们把 mutation 当做接收 state 作为参数并修改 state 的自定义事件即可,上一段所说的 commit 就是触发 mutaion 这个自定义事件的方法。光说不练假把式,接下来,我们对为 vuex 添加上 mutation,实现 state 的动态改变:首先,当然是修改生成 Vuex.Store 示例的选项对象,为其添加 mutations。
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
count: 1
},
// 添加 mutation
mutations: {
increment (state) {
state.count++
}
}
})
在上面的代码中,我们添加了一个名为 increment 的 mutation。完成了自定义事件,接下来,我们只需要在组件中对 mutation 进行触发即可。我们在 HelloWorld.vue 添加一个按钮,每次点击触发一次 increment 这个 mutation。可以发现,触发方式很简单,只需要调用 store 自带的 commit 方法,其中参数为需要触发的 mutation 的名称。
// HelloWorld.vue
<template>
<div class=”hello”>
<div>{{$store.state.count}}</div>
<button @click=”$store.commit(‘increment’)”> 修改 count</button>
</div>
</template>
点击页面中的按钮,你会发现,页面中的两个 count 都同时增加了 1,说明我们成功实现了 state 的动态修改。
Action
action 类似于 mutation,也相当于一种自定义事件。只不过,action 操作的是 mutation 而不是 state。添加 action 的方法类似,在选项对象中新增 action 属性即可。与 mutation 的参数不同,action 的参数就是当前创建的 Vue.store 对象实例的上下文,一般将其命名为 context。我们需要使用其自带的 commit 方法来触发 mutation。下面我通过实际的例子来尝试下 action:首先,修改选项对象,使得新添加的 action 可以触发之前的 mutation:
// store.js
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment ({commit}) {
commit(‘increment’)
}
}
})
由于我们一般来说仅仅需要 context 中的 commit 方法,所以可以采用解构的方式,直接调用 commit 方法,而不需要以 context.commit 的方式使用它。接下来,只需要修改 HelloWorld.vue,使其能够在点击按钮时触发即可。action 的触发方式和 mutation 类似,只不过调用的方法是 dispatch。
// HelloWorld.vue
<template>
<div class=”hello”>
<div>{{$store.state.count}}</div>
<button @click=”$store.dispatch(‘increment’)”> 修改 count</button>
</div>
</template>
点击页面按钮,你会发现,实现了和之前相同的效果。
总结
学会了 vuex 三 jian 客:state,mutation,action,我们再回过头看看前面的那张关系图,此时应该很容易理解了吧?组件交互触发 action,在 action 中进行异步操作(可选)并触发 mutation,mutation 控制 state 的变动,state 修改之后,触发响应式,重新渲染组件。PS(其他的进阶用法,如:getter,module,简写以及 vuex 项目结构优化,甚至 vuex 源码解析将会在之后的文章一一讲解)
最后
个人认为对很多新手在入门时(不管学习什么东西),无可厚非最好刚开始是看视频。So,一份付出一份收获。如果你有需要购买学习视频的可以访问该网站加群 http://www.wantmore.top,也可以直接添加群号:157285015。偶尔会分享学习干货噢!

正文完
 0