《图解Vue3.0》- vuex - 第16节 Vuex

·  阅读 83

这是我参与8月更文挑战的第9天,活动详情查看:8月更文挑战

简介

是什么

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

为什么

下图是单数据流场景(无数据共享): 在日常开发中,我们常常遇到状态共享的场景,尤其是当一个组件不断的扩张,当到达一定的程度时,需要将其拆分为不同的小组件,这个时候经常就会需要使用到状态共享。自然,需要状态共享的场景还有很多,例如一处修改,在某一处需要相应的改变(例如header)等等。

针对上述场景也可以使用全局变量,但是由于没有管理,很容易造成全局污染,失控等问题。也可以借用vue-bus来实现,但是并不适用于复杂的场景。由此,vuex应运而生。

提示

小项目无需使用,当自己感觉需要时再使用。

初体验

安装

yarn add vuex@next --save
yarn add es6-promise
复制代码

code

main.js 这里注意,createApp是有返回值的,mount方法是没有的,所以先把app拿到之后,再做其他的一些挂载、引入操作, 这里利用createStore方法,创建了一个store,里面的state仅存在一个count的状态,然后定义了一个叫increment mutation, mutation里面定义着改变state的方法。之所以这样,因为store里面的state是无法从外部改变的。

import { createApp } from 'vue'
import App from './App.vue'
import { createStore } from 'vuex'

const store = createStore({
    state(){
        return {
            count: 0
        }
    },

    mutations: {
        increment(state) {
            state.count++;
        }
    },
});



const app = createApp(App);
app.use(store);

app.mount('#app');
复制代码

app.vue 因为前面已经创建了store, 定义了一个叫increment 的mutation,在使用的时候,直接使用this.$store.commit('increment');利用store的commit方法,触发increment的执行。

<template>
  <button @click="click">测试按钮</button>
</template>

<script>

export default {
  name: 'App',
  methods: {
    click () {
      this.$store.commit('increment');
      console.log(this.$store.state.count)
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
复制代码

测试结果

虽然vuex跟redux的工作目的类似,行为也类似,但是个人感觉vuex相对好上手一些。

核心概念

核心概念

  • state(mapState)
  • getter
  • mutaion
  • action
  • module

前面四个核心概念,看个小示例就对其功能一目了然了: main.js

app.vue

vuex的使用还是很友好的,在store里面进行定义state、mutations,actions,getters,然后在组件中进行读取state的值(state,getters,mapState)。需要触发state变化时,可以使用commit mutation进行修改,如果需要异步,也可以使用dispatch action进行修改。自然这里写在了一个文件里面,一个应用的store都放置在一个文件里处理,与组件相隔太远,还是不利于对程序的理解的。所以vuex还提供了一个module的方式,可以将store分割成多个module处理,然后最终合并成一个store。每个module都有自己的state,actions,mutations等。

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

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

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码

示例

main.js

app.vue

分类:
前端
标签: