博客
关于我
状态管理学习(二)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-架构篇
    查看>>
    MySQL-索引的分类(聚簇索引、二级索引、联合索引)
    查看>>
    Mysql-触发器及创建触发器失败原因
    查看>>
    MySQL-连接
    查看>>
    mysql-递归查询(二)
    查看>>
    MySQL5.1安装
    查看>>
    mysql5.5和5.6版本间的坑
    查看>>
    mysql5.5最简安装教程
    查看>>
    mysql5.6 TIME,DATETIME,TIMESTAMP
    查看>>
    mysql5.6.21重置数据库的root密码
    查看>>
    Mysql5.6主从复制-基于binlog
    查看>>
    MySQL5.6忘记root密码(win平台)
    查看>>
    MySQL5.6的Linux安装shell脚本之二进制安装(一)
    查看>>
    MySQL5.6的zip包安装教程
    查看>>
    mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
    查看>>
    Webpack 基本环境搭建
    查看>>
    mysql5.7 安装版 表不能输入汉字解决方案
    查看>>
    MySQL5.7.18主从复制搭建(一主一从)
    查看>>
    MySQL5.7.19-win64安装启动
    查看>>