博客
关于我
状态管理学习(二)Vuex、简单模拟Vuex
阅读量:247 次
发布时间:2019-02-28

本文共 3711 字,大约阅读时间需要 12 分钟。

Vuex 是 Vue.js 生态系统中专门设计的状态管理库,旨在帮助开发者高效地管理组件间共享的状态。它通过集中式的状态管理方式,确保状态变化具有可预测性和可追溯性。Vuex 的核心目标是解决复杂组件间数据共享和状态管理的问题。

Vuex 的核心概念

Vuex 的工作原理可以用以下流程来描述:

  • State(状态):全局性的状态存储,所有状态以单一状态树的形式集中管理。
  • Vue Components(组件):将状态绑定到视图中,通过双向数据绑定呈现给用户。
  • 用户交互:通过 Dispatch 分发 Action,执行异步请求或直接修改状态。
  • Commit(提交):将状态修改同步到仓库,记录状态变更。
  • Vuex 的核心概念包括:

    • Store(仓库):应用的核心,包含所有状态数据。
    • State(状态):响应式的状态存储,通过 DevTools 提供时光旅行功能。
    • Getter(计算属性):对 State 的数据进行处理,类似于计算属性。
    • Mutation(状态变更):同步操作,用于修改状态。
    • Action(动作):异步操作,用于执行 API 请求或其他任务。
    • Module(模块):通过模块划分功能模块的状态,提升代码维护性。

    Vuex 的基本结构

    使用 Vue CLI 创建项目时,如果选择使用 Vuex,会自动生成以下结构:

    // src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {},  mutations: {},  actions: {},  modules: {}})
    // src/main.jsimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({  router,  store,  render: h => h(App)}).$mount('#app')

    State 的使用

    Vuex 提供了 State 的响应式特性,使组件可以直接通过 $store.state 访问全局状态。例如:

    // src/store/index.jsexport default new Vuex.Store({  state: {    count: 0,    msg: 'Hello Vuex'  }})

    Vuex 提供了 mapState 函数,将状态映射为计算属性:

    Getter 的使用

    Getter 可以对 State 的数据进行处理,例如:

    // src/store/index.jsexport default new Vuex.Store({  getters: {    reverseMsg(state) {      return state.msg.split('').reverse().join('')    }  }})

    Mutation 的使用

    Mutation 是同步操作,用于修改状态。例如:

    // src/store/index.jsexport default new Vuex.Store({  mutations: {    increate(state, payload) {      state.count += payload    }  }})

    Vuex 提供了 mapMutations 将 Mutation 映射到组件方法中:

    Action 的使用

    Action 可以执行异步操作,例如:

    // src/store/index.jsexport default new Vuex.Store({  actions: {    increateAsync(context, payload) {      setTimeout(() => {        context.commit('increate', payload)      }, 1000)    }  }})

    Vuex 提供了 mapActions 将 Action 映射到组件方法中:

    Module 的使用

    Vuex 支持模块化管理,例如:

    // src/store/products.jsconst state = {  products: [    { id: 1, title: 'iPhone 11', price: 8000 },    { id: 1, title: 'iPhone 12', price: 10000 }  ]}const getters = {  productCount(state) {    return state.products.length  }}const mutations = {  setProducts(state, payload) {    state.products = payload  }}export default {  state,  getters,  mutations}
    // src/store/index.jsimport Vuex from 'vuex'import products from './products'import cart from './cart'Vue.use(Vuex)export default new Vuex.Store({  state: {    count: 0,    msg: 'Hello Vuex'  },  getters: {    reverseMsg(state) {      return state.msg.split('').reverse().join('')    }  },  mutations: {    increate(state, payload) {      state.count += payload    }  },  actions: {    increateAsync(context, payload) {      setTimeout(() => {        context.commit('increate', payload)      }, 1000)    }  },  modules: {    products,    cart  }})

    严格模式

    Vuex 提供了严格模式,禁止在组件中直接修改 State:

    export default new Vuex.Store({  strict: process.env.NODE_ENV !== 'production'})

    在严格模式下,直接修改 State 会抛出错误:

    插件

    Vuex 插件可以扩展其功能,例如购物车记录:

    const myPlugin = store => {  store.subscribe((mutation, state) => {    // 每次 mutation 完成后执行    console.log('状态变更', mutation, state)  })}

    总结

    Vuex 是 Vue.js 应用中状态管理的最佳选择,适用于大型单页应用项目。通过集中式管理状态,组件间的数据共享和状态变更可以更加高效和可控。Vuex 提供了丰富的功能,包括时光旅行、严格模式、模块化和插件系统等,帮助开发者构建高效且可维护的应用。

    转载地址:http://dfzp.baihongyu.com/

    你可能感兴趣的文章
    Mysql不同官方版本对比
    查看>>
    MySQL与Informix数据库中的同义表创建:深入解析与比较
    查看>>
    mysql与mem_细说 MySQL 之 MEM_ROOT
    查看>>
    MySQL与Oracle的数据迁移注意事项,另附转换工具链接
    查看>>
    mysql丢失更新问题
    查看>>
    MySQL两千万数据优化&迁移
    查看>>
    MySql中 delimiter 详解
    查看>>
    MYSQL中 find_in_set() 函数用法详解
    查看>>
    MySQL中auto_increment有什么作用?(IT枫斗者)
    查看>>
    MySQL中B+Tree索引原理
    查看>>
    mysql中cast() 和convert()的用法讲解
    查看>>
    mysql中datetime与timestamp类型有什么区别
    查看>>
    MySQL中DQL语言的执行顺序
    查看>>
    mysql中floor函数的作用是什么?
    查看>>
    MySQL中group by 与 order by 一起使用排序问题
    查看>>
    mysql中having的用法
    查看>>
    MySQL中interactive_timeout和wait_timeout的区别
    查看>>
    mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
    查看>>
    mysql中json_extract的使用方法
    查看>>
    mysql中json_extract的使用方法
    查看>>