vuex实现及简略解析(小结)

Vuex实现及简略解析

Vuex是一个专为Vue.js设计的状态管理库,他采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在大型的Vue.js应用程序中,多个组件之间共享同一状态,直接进行状态传递会比较麻烦。在这种情况下,我们可以使用Vuex。本文详细介绍了Vuex的实现和简略的解析。

Vuex简单介绍

Vuex提供了一个集中式存储管理应用的所有组件的状态的机制。包括:状态(state)、变更(mutations)、行为(actions)、获取器(getters)这四个部分。Vuex 属于基于状态管理模式的设计,视图和状态是分开了的,它们之间的复杂关系都被交给了 Vuex 来管理。一个重要的点就是:状态的改变一定是发生在 Mutation 函数中,每当一个 Action 被触发时,都会间接地导致提交 Mutations 的过程。

几种常见的状态管理模式

Vue.js中我们经常使用以下几种状态管理模式:

  1. Props & $emit:@click“新增”按钮 --“新增”是一个父组件,并可以通过$emit来向子组件传值。这种状态传递模式适用于组件通信中父子关系单向的情况。

  2. Event Bus:适用于复杂的组件通信中,多个兄弟之间、跨多层嵌套组件直接的情况。

  3. Vuex:适用于中大型SPA应用中的状态管理。

Vuex的实现

state

Vuex的state是给Vuex用来存状态的,它类似于一个全局变量,定义在src/store/index.js,并在Vue实例中作为计算属性引用。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

getter

Vuex的getter顾名思义就是用来获取已经在Vuex存储的状态的。可以将state值通过getter进行计算,返回一个新的值。实现:getter相当于 store 中的计算属性(commit/mutations 其实是 store 的 methods) getter可以理解为是 store 的计算属性。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, done: true },
      { id: 2, done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

mutation

Vuex的mutation是唯一管理状态的途径,需要注册一个函数来操作状态。mutation是Vuex中用于改变状态的唯一途径。通过提交mutation来进行操作。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    add (state, n) {
      return (state.count += n)
    },
    addOne (state) {
      return (state.count += 1)
    },
    minus (state, n) {
      return (state.count -= n)
    }
  }
})

action

Vuex的action主要是为了方便异步操作,将异步操作提交给mutation,并提供了跟踪异步操作状态的方法。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    add (state, n) {
      return (state.count += n)
    },
  },
  actions: {
    actionAdd ({commit}, payload) {
      setTimeout(() => {
        commit('add', payload)
      }, 1000)
    }
  }
})

简略解析

在Vuex中,存在以下几种部分:state:我们需要管理的状态,驱动应用的数据源;mutations:修改状态的事件处理器;getters:从state中获取数据的计算属性;actions:异步处理逻辑。

当状态state变化时,视图响应函数对应的视图也会自动更新。

示例

示例1:count

  • 定义state
export default {
  state: {
    count: 0
  }
}
  • 定义mutations
export default {
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  }
}
  • 定义actions
export default {
  actions: {
    increment ({ commit }) {
      commit('increment')
    },
    decrement ({ commit }) {
      commit('decrement')
    },
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
}
  • 定义getters
export default {
  getters: {
    evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
  }
}

示例2:todos

  • 定义state
export default {
  state: {
    todos: [
      { id: 1, text: 'vue.js', done: true },
      { id: 2, text: 'react.js', done: false },
      { id: 3, text: 'angular.js', done: false }
    ]
  }
}
  • 定义mutations
export default {
  mutations: {
    addTodo (state, text) {
      state.todos.push({
        id: state.todos.length + 1,
        text,
        done: false
      })
    },
    toggleTodo (state, todo) {
      todo.done = !todo.done
    }
  }
}
  • 定义actions
export default {
  actions: {
    addTodo ({ commit }, text) {
      commit('addTodo', text)
    },
    toggleTodo ({ commit }, todo) {
      commit('toggleTodo', todo)
    }
  }
}
  • 定义getters
export default {
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    undoneTodos: state => {
      return state.todos.filter(todo => !todo.done)
    }
  }
}

以上就是对Vuex实现及简略解析的详细攻略,希望对大家有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vuex实现及简略解析(小结) - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue3组件化开发常用API知识点总结

    让我详细讲解一下“vue3组件化开发常用API知识点总结”的完整攻略。 一、组件化开发 1.1 Vue 组件基础 组件注册:调用 Vue.component 方法注册一个全局组件 组件使用:在模板中使用组件标签名 组件通信:通过 props 和自定义事件实现父子组件通信 示例代码: <template> <my-component :nam…

    Vue 2023年5月27日
    00
  • Vue自定义指令写法与个人理解

    下面是Vue自定义指令的完整攻略: 一、Vue自定义指令基本写法 Vue自定义指令可以用来扩展模板的功能,让Vue在处理DOM元素时更加灵活、方便。下面是Vue自定义指令的基本写法: Vue.directive(‘自定义指令名称’,{ // 指令的定义 bind:function(el, binding, vnode) { // 指令与元素绑定时发生的操作 …

    Vue 2023年5月27日
    00
  • Vue参数的增删改实例详解

    《Vue参数的增删改实例详解》是一篇介绍Vue.js中参数操作的文章,其中包括了参数的添加、修改和删除操作。下文将从以下三个部分对该文章进行详细解释。 一、参数的添加 在Vue.js中添加参数有以下几种方式: 1. 在data对象中添加参数 在Vue中,可以通过在data对象中声明参数来添加参数,如下所示: data() { return { msg: ‘h…

    Vue 2023年5月29日
    00
  • vue如何获取指定元素

    当我们使用Vue来进行开发时,有时会需要获取指定元素进行进一步操作。Vue提供了多种方式来获取指定元素,下面进行详细讲解。 通过ref获取指定元素 在Vue中通过给元素添加ref属性来获取指定元素。在Vue实例中可以通过this.$refs来访问元素,$refs的值是一个对象,对象的属性名是元素的ref属性值,属性值是元素本身。举个例子: <templ…

    Vue 2023年5月28日
    00
  • vue中如何实现拖拽调整顺序功能

    首先我们需要理解Vue中拖拽调整顺序的工作原理和步骤。通常的实现方式是用Vue的指令v-for生成一个列表,然后通过给每个列表项添加拖放事件来实现拖拽和调整顺序。 以下是实现vue中拖拽调整顺序的具体步骤: 第一步:安装依赖 在Vue项目中需要使用vue-dragscroll和vuedraggable这两个库,因此需要先进行安装。 npm install -…

    Vue 2023年5月28日
    00
  • webpack中如何加载静态文件的方法步骤

    当我们使用webpack进行前端工程化打包构建时,经常会涉及到加载静态文件的问题,包括但不限于图片、字体、音视频等多种类型的文件。接下来,我将为大家介绍 webpack 中如何加载静态文件的方法步骤。 1. 安装相关loader webpack 对于不同类型的静态文件,需要用对应的 loader 来进行加载。 以图片文件为例,可以安装 file-loader…

    Vue 2023年5月28日
    00
  • vue 实现购物车总价计算

    下面我会详细讲解Vue实现购物车总价计算的完整攻略。 确定购物车数据格式 首先需要明确购物车数据的格式,常见的数据结构是一个数组,每个元素表示一件商品,包含以下字段: { id: String, // 商品id name: String, // 商品名称 price: Number, // 单价 count: Number // 数量 } 创建一个购物车组件…

    Vue 2023年5月29日
    00
  • Vue简单实现原理详解

    Vue简单实现原理详解 Vue是一款流行的前端JavaScript框架,能够帮助我们更高效地开发Web应用程序。本文主要介绍Vue的简单实现原理,包括数据绑定、指令和组件等方面。 数据绑定原理 Vue的数据绑定是其最重要的特性之一,其实现原理是通过Vue的响应式系统来实现的。当我们使用Vue创建一个对象时,它会将指定的属性转变为响应式属性(objects)。…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部