Skip to main content

谈谈 Vuex

是什么​

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，可以方便的实现组件之间数据的共享

核心概念的名字和作用​

  1. Store 是个大容器，包含以下所有内容

  2. State 用来读取状态，带有一个 mapState 辅助函数

  3. Getter 用来读取派生状态，附有一个 mapGetters 辅助函数

  4. Mutation 用于同步提交状态变更，附有一个 mapMutations 辅助函数

  5. Action 用于异步变更状态，但它提交的是 mutation,而不是直接变更状态

  6. Moudule 用来 store 划分模块，方便维护代码

常见追问：Mutation 和 Action 为什么要分开？ 答案：为了让代码更易于维护。

怎么做​

import {createApp} from 'vue'
import {createStore}  from 'vuex'

// 创建一个新的store实例
const store = createStore({
    state(){
        return {
            count:0
        }
    },
    mutations:{
        increment(state){
            state.count++
        }
    }
})

// store.commit('increment')
// console.log(store.state.count) // -1

const app = createApp({/* 根组件 */})
// 将store实例作为插件安装
app.use(store)
methods:{
    increment(){
        this.$store.commit('increment')
        console.log(this.$store.state.count)
    }
}

缺点​

  • vuex 没有持久化存储的手段，每次刷新都会重置所有的数据，vuex 中的 state 会重新变为初始状态
  • 如果要开发的应用足够简单，Vuex 可能就显得相对繁琐冗余，不适合使用