Vuex 简单实例

jsummer 发布于2019-08-23 11:33 / 1414人阅读

摘要：但是时间匆忙没有接触到，今天闲暇时看了解了一下，并做了一个小，用于记录的简单使用过程。在中引入在组件中使用在组建可以通过获得状态更改状态只能以提交的方式。这里当然并没有完全发挥出全部的，还在学习中，写这篇文章主要是记录其简单的使用过程。

前一段时间因为需要使用vue，特地去学习了一下。但是时间匆忙vuex没有接触到，今天闲暇时看了解了一下vuex，并做了一个小demo，用于记录vuex的简单使用过程。

什么是Vuex？

vuex是专门为vue.js应用程序开发的一种状态管理模式，当多个视图依赖于同一个状态或是多个视图均可更改某个状态时，将共享状态提取出来，全局管理。

下面是一个计数器的例子

在src目录下创建一个store文件夹。
src/store.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    show: ""
  },
  getters: {
    counts: (state) => {
      return state.count
    }
  },
  mutations: {
    increment: (state) => {
      state.count++
    },
    decrement: (state) => {
      state.count--
    },
    changTxt: (state, v) => {
      state.show = v
    }
  }
})

export default store

state就是我们的需要的状态，状态的改变只能通过提交mutations,例如：

handleIncrement () {
      this.$store.commit("increment")
    }

带有载荷的提交方式：

changObj () {
      this.$store.commit("changTxt", this.obj)
    }

当然了，载荷也可以是一个对象，这样可以提交多个参数。

changObj () {
      this.$store.commit("changTxt", {
          key:""
      })
    }

在main.js中引入store.js

import store from "./store/store"
export default new Vue({
  el: "#app",
  router,
  store,
  components: {
    App
  },
  template: ""
})

在组件中使用

在组建可以通过$store.state.count获得状态
更改状态只能以提交mutation的方式。

到这里这个demo就结束了，

感觉整个个过程就是一个传输数据的过程，有点类似全局变量，但是vuex是响应式的。
这里当然并没有完全发挥出全部的vuex，
vuex还在学习中，写这篇文章主要是记录其简单的使用过程。

GPU云服务器云服务器事务简单实例指令简单实例 webrtc简单实例 php简单实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97111.html

Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fai1017 2019-08-30 13:53 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

zilu 2019-08-26 11:35 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fjcgreat 2019-08-01 18:30 评论0 收藏0
vuex 2.0源码解读（一）

摘要：简单点说，当你使用构造函数，它实际上做了这么几件事，首先定义给实例定义一些内部属性，之后就是绑定和的上下文对象永远是实例上，之后根据传入的充实内部状态等等。函数执行的结果是返回一个对象，属性名对应于传入的对象或者数组元素。转载请注明出处 https://segmentfault.com/a/11... vuex2.0 和 vuex1.x 相比，API改变的还是很多的，但基本思想没什么...

luqiuwen 2019-08-20 11:32 评论0 收藏0
Vue.js学习

摘要：一基础学习模式下图不仅概括了模式，还描述了在中是如何和以及进行交互的。关于这一点我们将在后续反应系统中讨论。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这个对象必须是普通对象原生对象，及原型属性会被忽略。 Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。其实和Jquery一样...

TIGERB 2019-08-21 14:15 评论0 收藏0