关闭

财富坊cff888: Vue之vuex的简单使用

标签: vuex使用
335人阅读 评论(0) 收藏 举报
分类:

读了一遍官网资料总结一下vuex的基本用法,这里介绍的是基于vue-cli开发的用法因此跟官方的写法略有不同。
一,vue是什么。

官方解释Vuex是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
在一些应用比较复杂的单页面项目里使用vuex比较合适,因为当兄弟、父子组件数据通信、共用状态过多时这些状态会变得让你难以管理,当某部分出现问题便要用大量时间去组件中查改代码,这并不是我们开发者想要的,因此用一个vuex来集中管理各个状态是比较好的选择。

二,vuex应用结构

vue中的单项数据流结构如下:

这里写图片描述

上图表明用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。

vuex的应用结构如下图:

这里写图片描述

vuex中的state、action、mutation的关系。

state负责存储整个应用的状态数据,要注意在入口文件main.js注入store对象,就可以在根组件下的子组件使用this.$store.state获取状态了。

mutation里面写着改变状态数据的方法(一定要写在这里),mutation是同步事件要注意,里面的方法不能写异步的,组件中触发一个mutation的方法store.commit(mutationName)。

action也是一个改变状态数据的事件,但不同的是action改变状态是通过调用mutation来实现的,注意action是个异步事件。直接触发action就使用this.$store.dispatch(actionName)。

三,vuex的简单使用

1,下载安装

npm install --save vuex
//注意要带save

2,src目录下建文件夹和文件结构是src/store/store.js,store.js代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increase (state) {
      state.count++
    }
  },
  actions: {
    actionIncrease ({commit}) {
      commit('increase')
    }
  }
})
export default store

3,在入口文件main.js引入,并挂载到根节点

import Vue form 'vue';
import Vuex from 'vuex';
import store from './store/store.js'
Vue use(Vuex);
new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

4,子组件调用状态值count,并通过点击触发action提交mutation来增加数值
子组件模板:

<template>
  <span>{{count}}</span>
  <button @click="add">增加数值</button>
</template>
<script>
  export default {
    computed:{
      count () {
        return this.$store.state.count;
      }
    },
    methods: {
      add() {
        this.$store.dispatch('actionIncrease')
      }
    }
  };
</script>

ok,以上就是vuex的简单使用了,别的组件如需调用或修改vuex的数据状态也依此法使用。

0
0
查看评论

Vue---使用vuex

Vue---使用vuex
  • TONELESS
  • TONELESS
  • 2017-05-11 16:10
  • 5151

最详细的Vuex教程

最详细的Vuex教程什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。 引入Vuex(前提是已经用Vue脚手架工具构建好项目)1、利用npm包管理工...
  • H5_QueenStyle12
  • H5_QueenStyle12
  • 2017-07-19 14:59
  • 55673

vue+vuex+router初体验

前言本人是java开发出生,工作需要研究node/vue,在学习期间参照很多博文,书写示例代码,文中肯定会有很多不专业的地方,记录一方面用于自己梳理知识脉络,一方面方便日后查询,同时还可以让和我处于相同情况的码农们有个参考,废话不多说了,开始撸代码,这才是每个码农关心的问题.vue环境搭建没有详细了...
  • forwujinwei
  • forwujinwei
  • 2017-06-12 19:20
  • 209

vuex的官方文档

  • 2017-09-05 10:32
  • 1.12MB
  • 下载

Vuex2.0边学边记+两个小例子

转载自:http://www.jianshu.com/p/13bec8f5b17d 最近在研究Vuex2.0,搞了好几天终于有点头绪了。 首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概...
  • wulixiaoxiao1
  • wulixiaoxiao1
  • 2017-02-25 17:05
  • 5046

最简单的Vuex示例

最简单的Vuex示例学习Vuex,弄个最简单的例子备忘一下,mapGetters, mapActions, mapMutations, state都用到了。1.老规矩,vue-cli脚手架来一下vue init webpack-simple testvue2.在src下创建 src/componen...
  • tanmx219
  • tanmx219
  • 2017-11-20 11:01
  • 193

Vue2.0+Vue-router2.0+Vuex2.0搭建搭建环境

一、安装 nodejs 使用node -v查看是否有安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install webpack -g 安装vue脚手架 npm...
  • zglwy
  • zglwy
  • 2017-07-27 15:03
  • 401

vuex的demo

  • 2017-01-04 10:00
  • 635KB
  • 下载

用vue-cli 与vuex一步一步搭建一个笔记应用(四)

讲了这么久,终于讲到重点了。将vuex用进我们的笔记应用项目首先建立一个文件夹用来放vuex吧按照那篇博文的写法,一个store.js 和 actions.js再想一下一个笔记应用需要哪些数据呢? 1、笔记数据 2、以及当前活动的笔记数据(即正在编辑的笔记)好像就只有这个数据了吧。对于笔记也就只...
  • sinat_25127047
  • sinat_25127047
  • 2017-05-13 18:34
  • 1316

基于vue-cli的vue项目之vuex的使用4-------moudles分块

按照官方文档,就是为了避免代码太长了。所以使用了moudle 1.store.js//配置仓库,第五道第二十六为一个模块。第二十七到四十八为一个模块,在第四十九到五十四行抛出 import Vue from 'vue'; import Vuex from 'vuex'...
  • HUSHILIN001
  • HUSHILIN001
  • 2017-09-22 09:13
  • 227