Vuex 入门教程

Vuex 入门教程

什么是 Vuex?

Vuex 是一个专为 Vue.js 设计的状态管理库。它能以一种可预测的方式管理应用的状态,并使得视图和状态之间的关系更加简单明了。

Vuex 核心概念

State

Vuex 使用单一状态树,即用一个对象包含了全部的应用层级状态。

一个简单的例子:

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

其中 count 就是我们的应用状态,通过 this.$store.state.count 可以访问该状态。

Getter

Getter 可以看做是 store 的计算属性,如果一个状态的值依赖于多个状态,可以用 Getter 来计算。

一个简单的例子:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, task: 'todo1', done: false },
      { id: 2, task: 'todo2', done: true },
      { id: 3, task: 'todo3', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

其中 doneTodos 就是我们的 Getter,通过 this.$store.getters.doneTodos 可以访问该计算属性。

Mutation

Mutation 是改变状态的唯一途径,但它必须是同步的方式,任何异步操作都必须放在 Action 中。

一个简单的例子:

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

其中 increment 就是我们的 Mutation,通过 this.$store.commit('increment') 可以调用该 Mutation。

Action

Action 可以看做是对 Mutation 的封装,它可以执行异步操作,并调用多个 Mutation,可以指定异步操作执行成功后调用的 Mutation。

一个简单的例子:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})

其中 increment 就是我们的 Action,通过 this.$store.dispatch('increment') 可以调用该 Action。

Vuex 完整示例

以下是一个完整的 TodoList 应用示例,它包含了 Vuex 的所有核心概念。

<template>
  <div>
    <h1>TodoList</h1>
    <input type="text" v-model="newTodo">
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="todo in filteredTodos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        {{ todo.task }}
      </li>
    </ul>
    <h2>Completed todos</h2>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">
        {{ todo.task }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    filteredTodos () {
      return this.$store.getters.filteredTodos
    },
    doneTodos () {
      return this.$store.getters.doneTodos
    }
  },
  methods: {
    addTodo () {
      this.$store.dispatch('addTodo', this.newTodo)
      this.newTodo = ''
    }
  },
  data () {
    return {
      newTodo: ''
    }
  }
}
</script>
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, task: 'todo1', done: false },
      { id: 2, task: 'todo2', done: true },
      { id: 3, task: 'todo3', done: false }
    ]
  },
  getters: {
    filteredTodos (state) {
      return state.todos.filter(todo => !todo.done)
    },
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    addTodo (state, newTodo) {
      state.todos.push({
        id: state.todos.length + 1,
        task: newTodo,
        done: false
      })
    }
  },
  actions: {
    addTodo (context, newTodo) {
      setTimeout(() => {
        context.commit('addTodo', newTodo)
      }, 1000)
    }
  }
})

在上述示例中,我们使用了 Vuex 来管理 TodoList 应用的状态,包括 todos 列表及其状态,添加 Todo 的方法及其异步操作等。其中 store 包含了我们的状态、getters、mutations 和 actions,通过在 Vue 组件内调用 this.$store.state.xxxthis.$store.getters.xxx 等方法来访问状态。

总结

本文讲解了 Vuex 的核心概念及其应用,代码示例基于 Vue 单文件组件进行实现,让初学者能够更好的理解。同时,本文仅讲解了 Vuex 的入门内容,更进一步的内容需要进一步学习。

参考资源

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vuex 入门教程 - Python技术站

(0)
上一篇 2天前
下一篇 2天前

相关文章

  • Vue privide 和inject 依赖注入的使用详解

    Vue中,provide和inject是实现依赖注入的两个函数。在组件树中,父组件可以通过provide提供一些数据或方法,子组件可以通过inject来注入这些数据或方法。 在使用provide向下传递时,我们可以把需要传下去的属性或方法放在一个对象中。如下面的例子: // Parent.vue <template> <div> &l…

    Vue 2天前
    00
  • vue如何动态绑定img的src属性(v-bind)

    在Vue中,可以使用v-bind指令动态绑定HTML元素的属性。对于img标签的src属性,我们也可以使用v-bind进行动态绑定。 具体实现步骤如下: 绑定数据到Vue实例的data中 首先,需要将图片的URL地址存储在Vue实例的data中,作为动态绑定的数据。例如: <template> <div> <img :src=&…

    Vue 2天前
    00
  • vue 数组添加数据方式

    下面是“Vue 数组添加数据方式”完整攻略。 前置知识: 在了解Vue中的数组添加数据方式之前,我们需要了解Vue中的响应式原理。Vue在渲染页面时,会做一个数据变更监听,当数据发生变化时,它会尝试重新渲染页面。数组在JS中是通过push和pop等方法改变数据,但这些方法不会触发数组的变更监听。因为这个原因,Vue提供了一些可以触发变更监听的数组方法。 通过…

    Vue 2天前
    00
  • vue路由划分模块并自动引入方式

    Vue 路由划分模块并自动引入方式可以让我们在开发过程中更加方便地管理和维护路由,以下是详细攻略: 划分模块 为了更好地管理路由,我们可以将相似的路由放置于同一文件夹中,比如: – src – pages – home – index.vue – children.vue – about – index.vue – children.vue 其中,home …

    Vue 2天前
    00
  • Zend公司全球首推PHP认证

    概述 Zend公司推出的PHP认证考试是PHP开发领域的权威认证,是证明PHP开发能力的重要途径之一。本攻略将会详细介绍Zend PHP认证的报名、考试流程及复习方法,以及提供两个示例供参考。 报名流程 注册Zend官网账号并登录; 进入Zend PHP认证官方网站; 选择想要参加的考试版本; 填写个人信息,并支付考试费用; 完成支付后,您将收到确认电子邮件…

    Vue 1天前
    00
  • Vue学习笔记进阶篇之函数化组件解析

    Vue学习笔记进阶篇之函数化组件解析,主要涉及Vue中的函数化组件,对于Vue的一些高级使用场景有很大的帮助作用。在本篇攻略中,我将为大家详细介绍函数化组件的概念、特点以及使用方法,并且会给出一些实际的使用示例。 什么是函数化组件 函数化组件,简称函数组件,是Vue中一种新的组件书写方式。与传统的Vue组件相比,函数组件去掉了<template>…

    Vue 3天前
    00
  • vue管理系统项目中的一些核心技能汇总

    当我们在开发Vue管理系统时,需要掌握一些核心技能,以下是一些关键点: Vue.js Vue.js是一个用于构建交互式Web界面的渐进式JavaScript框架。Vue.js非常易于学习和使用,同时也非常灵活和高效。 例如,在Vue管理系统中,你可以使用Vue.js轻松创建组件,这些组件可以被复用。在以下代码示例中,我们可以看到如何使用Vue.js创建一个简…

    Vue 1天前
    00
  • Nuxt.js实现一个SSR的前端博客的示例代码

    下面就是“Nuxt.js实现一个SSR的前端博客的完整攻略”。 Nuxt.js简介 Nuxt.js 是一个基于 Vue.js 的通用应用框架,它可以帮助我们快速搭建一个 Vue.js 应用(如 SPA、SSR、静态 生成),并且还提供了自动化的构建和部署功能。 步骤 1. 创建项目 首先,我们需要安装 Node.js 和 Npm。然后,我们可以使用 Npm …

    Vue 1天前
    00
  • Vue验证码60秒倒计时功能简单实例代码

    那么我们来逐步讲解如何使用Vue实现验证码60秒倒计时功能的步骤和代码实现。 步骤一:安装Vue 首先,需要安装Vue,可通过以下命令安装: npm install vue 步骤二:创建Vue实例 在HTML页面中引入Vue库后,需创建Vue实例,用于管理页面数据和操作行为: const vueApp = new Vue({ el: ‘#app’, data…

    Vue 1天前
    00
  • 解决ant Design中this.props.form.validateFields未执行的问题

    解决ant Design中this.props.form.validateFields未执行的问题主要是因为使用了错误的语法或写法,导致该方法无法被正确调用。以下是一些可能导致该问题的原因: 没有通过this.props.form.getFieldDecorator()进行表单域装饰,导致validateFields方法找不到要校验的表单域。 没有正确绑定t…

    Vue 2天前
    00