Vuex 使用及简单实例(计数器)

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

什么是Vuex？

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

引入Vuex（前提是已经用Vue脚手架工具构建好项目）

1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

import Vue from 'vue';
import Vuex from 'vuex';

3、使用我们vuex，引入之后用Vue.use进行引用。

Vue.use(Vuex);

通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。

4、在main.js 中引入新建的vuex文件

import storeConfig from './vuex/store'

5、再然后 , 在实例化 Vue对象时加入 store 对象 :

 new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
 })

下面是一个计数器的例子

在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: '<App/>'
})

在组件中使用

在组建可以通过$store.state.count获得状态

更改状态只能以提交mutation的方式。

<template>
<div class="store">
 <p>
 {{$store.state.count}}
 </p>
 <el-button @click="handleIncrement"><strong>+</strong></el-button>
 <el-button @click="handleDecrement"><strong>-</strong></el-button>
 <hr>
 <h3>{{$store.state.show}}</h3>
 <el-input
 placeholder="请输入内容"
 v-model="obj"
 @change="changObj"
 clearable>
 </el-input>
</div>
</template>
<script>
export default {
 data () {
 return {
  obj: ''
 }
 },
 methods: {
 handleIncrement () {
  this.$store.commit('increment')
 },
 handleDecrement () {
  this.$store.commit('decrement')
 },
 changObj () {
  this.$store.commit('changTxt', this.obj)
 }
 }
}
</script>

到这里这个demo就结束了，

感觉整个个过程就是一个传输数据的过程，有点类似全局变量，但是vuex是响应式的。

这里当然并没有完全发挥出全部的vuex，

vuex还在学习中，写这篇文章主要是记录其简单的使用过程。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex的使用及持久化state的方式详解

    vuex的使用及持久化state的方式详解

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 当我们接触vuex的时候,这是我们最先看到的一句官方引导. 从这句话中,我们可以得到如下几个信息: 1.vuex是一个为vue而存在的特化的Flux,如同数据库中的弱实体一样,离开了vue,vuex就用不了.反之可以看到redux就不存在,无论是vue还是react,redux都可以使用.所以这里体现的vuex的"特性",redu

  • 详解在React里使用"Vuex"

    一直是Redux的死忠党,但使用过Vuex后,感叹于Vuex上手之快,于是萌生了写一个能在React里使用的类Vuex库,暂时取名 Ruex. 如何使用 一:创建Store实例: 与vuex一样,使用单一状态树(一个对象)包含全部的应用层级状态(store). store可配置state,mutations,actions和modules属性: state :存放数据 mutations :更改state的唯一方法是提交 mutation actions :Action 提交的是 mutatio

  • vuex 使用文档小结篇

    Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel调试.状态快照导入导出等高级调试功能. 安装 直接下载CDN 引用 <script src="/path/to/vue.js"></script> <script s

  • 使用vuex的state状态对象的5种方式

    vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count:66 } export default state //index.js import Vue from 'vue' import Vuex from 'vuex' i

  • 详解vuex的简单使用

    1 目录的配置 根据官方推荐在src目录里面创建store目录 2 创建store里面的文件 根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js 2.1 state.js state.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态.至此它便作为一个『唯一数据源(SSOT)』而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接

  • vuex的简单使用教程

    vuex的简单使用教程

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. 使用vuex进行组件间数据的管理 npm i vuex -S main.js import Vue from 'vue' import App from './App.vue' import store from './store.js' new Vue({ store, el: '#app', r

  • vuex 的简单使用

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. 1.在vue 组件中 执行enabledcheckbox方法 ,true 为参数,用来改变state中的值 this.$store.dispatch("enabledcheckbox",true) 从state获取useredit的值 this.$store.state.useredit

  • vuex与组件联合使用的方法

    官方定义: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.我的理解就是,vuex就是前端的数据库. 1.首先核心是store,是个仓库,包含着state,因此第一步需要新建一个store. 显示界面: 其中state就是仓库store,东西都存在这里. 2.从state中取数据,使用Lodash比较方便,语法如下: 也可以使用vuex的getters,语法; 官方文档还结束通过属性访问,通过方法访问等.https://vuex.vuejs.org/zh-cn/getters.h

  • 简单的vuex 的使用案例笔记

    1. npm install vuex 2. 在src 下 新建文件夹 store (为什么是这个单词,vuex 是用来状态管理的,用储存一些组件的状态,取存贮,仓库之意),store 文件下 新建文件 index.js  (为什么是index.js? 在导入的时候,会第一选择这个叫index的文件) 3. index.js import 导入 vue 和vuex (import 是es6 的语法, es5 是 require), 代码如下: 这里的demo 是一个 改变 app 的模式 的一个

  • Vuex 使用及简单实例(计数器)

    Vuex 使用及简单实例(计数器)

    前一段时间因为需要使用vue,特地去学习了一下.但是时间匆忙vuex没有接触到,今天闲暇时看了解了一下vuex,并做了一个小demo,用于记录vuex的简单使用过程. 什么是Vuex? vuex是专门为vue.js应用程序开发的一种状态管理模式,当多个视图依赖于同一个状态或是多个视图均可更改某个状态时,将共享状态提取出来,全局管理. 引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install

  • Java实现监控多个线程状态的简单实例

    实例如下: import java.util.concurrent.CountDownLatch; import java.util.concurrent.Executor; import java.util.concurrent.Executors; /** * 测试监控类 * * @author * */ public class WatchThread { /** * 测试函数 * * @throws InterruptedException */ public void testThre

  • php for 循环使用的简单实例

    for 循环用于您预先知道脚本需要运行的次数的情况. 语法 for (初始值; 条件; 增量) { 要执行的代码; } 参数: •初始值:主要是初始化一个变量值,用于设置一个计数器(但可以是任何在循环的开始被执行一次的代码). •条件:循环执行的限制条件.如果为 TRUE,则循环继续.如果为 FALSE,则循环结束. •增量:主要用于递增计数器(但可以是任何在循环的结束被执行的代码). 注释:上面的初始值和增量参数可为空,或者有多个表达式(用逗号分隔). 下面的实例定义一个初始值为 i=1 的循

  • C++实现统计代码运行时间计时器的简单实例

     C++实现统计代码运行时间计时器的简单实例 一.前言 这里记下从网上找到的一些自己比较常用的C++计时代码 二.Linux下精确至毫秒 #include <sys/time.h> #include <iostream> #include <time.h> double get_wall_time() { struct timeval time ; if (gettimeofday(&time,NULL)){ return 0; } return (double

  • vuex实现的简单购物车功能示例

    本文实例讲述了vuex实现的简单购物车功能.分享给大家供大家参考,具体如下: 购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list/> </div> <h2>已选商品</h2> <div class="shop-cartbox"> &l

  • 把普通对象转换成json格式的对象的简单实例

    1.什么叫做JSON? JSON只是一种数据格式(它不是一种新的数据类型) var obj = {name: "中国", age: 5000};//->普通格式的对象 var jsonObj = {"name": "中国", "age": 5000};//->JSON格式的对象 (只要把普通对象的属性名用""(不能是'')包起来,这样的格式就是我们JSON格式的对象) var data = [

  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="angular.min.js" charset="utf-8"></scri

  • Java实现一个小说采集程序的简单实例

    被标题吸引进来的不要骂我. 只是一个简单的实现,随手写了来下载一部喜欢的小说的.示例中的小说只是示例,不是我的菜. 使用了jsoup.挺好用的一个工具. 有需要的话,参考下自己改吧.挺简单的,是吧. 代码如下: package com.zhyea.doggie; import java.io.File; import java.io.FileWriter; import java.io.IOException; import org.jsoup.Jsoup; import org.jsoup.n

  • 使用JS实现图片展示瀑布流效果(简单实例)

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • ASP.NET中Web API的简单实例

    ASP.NET中Web API的简单实例

    一.Web API的路由 1.在Visual Studio中新建MVC4项目,在App_Start目录下有一个WebApiConfig.cs文件,这个文件中就是相应的Web API的路由配置了. 2.Web API 框架默认是基于 Restful 架构模式的,与ASP.NET MVC 有区别的是,它会根据 Http 请求的 HttpMethod(Get.Post.Put.Delete)来在Controller 中查找 Action,规则是:Action 名中是否以Get.Post 开头?Acti

随机推荐