Vuex的简单认识
一. 什么是vuex?
Vuex是一个专为了vue.js 应用程序开发的状态管理模式
二.为什么要用vuex?
构建一个大型单页面应用程序时,Vuex可以更好的帮我们的组件外部更好的统一管理状态
类似服务端的session(单纯的比较)
三.Vuex的核心观念
State
是唯一的数据源
单一状态树
Getters
通过Getters可以派生一些新的状态
通过Getters 操作只需要done的属性
Mutations
更改vuex的store中的状态的唯一方法提交Mutations
调用
Actions
Action提交的是mutation,而不是直接变更状态
Action可以包含任意异步操作
Modules
面对复杂的应用程序,当管理的状态比较多时,我们需要将Vuex的store对象分割成模块(Modules)
四.Vuex状态管理
因为是初次写文章以及是后端开发人员,所以能明白,因为和后端思维是通的,但是无法深刻写出对其的完整理解,见谅
五.使用方法
1.安装
`npm install Vuex --save`
2.引入项目
2.1在src目录下新建Store.js ,编写如下代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0
},
mutations:{
increment:state => state.count ++,
decrement:state => state.count --,
}
})
2.2在main.js 引入该js
import Store from '../src/store/store'
2.3 挂载Store
new Vue({
el: '#app',
Store,
router,
components: { App },
template: '<App/>'
})
2.4 新建Test.vue 并建立对应路由 编写如下代码<template>
<div>
{{ count }}
<p>
<button @click="incre">+</button>
</p>
</div>
</template>
<script>
export default {
methods:{
incre(){
this.$store.commit('increment')
},
},
computed:{
count(){
console.log(this.$store.state.count);
return this.$store.state.count
},
}
}
</script>
<style scoped>
</style>
运行结果
后记
通过该vuex示例,了解vuex的常用配置及方法调用。希望对不怎么熟悉vuex的同学快速上手vuex项目有点帮助。
因为没太多东西,我自己也是刚接触,本例就不往GitHub扔了,如果尝试了本例,但是没有跑起来的小伙伴,可以一起交流下。
Vuex的简单认识的更多相关文章
- Vuex 最简单的数量增减实例
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- vuex最简单、最详细的入门文档
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...
- Vuex的简单应用
### 源码地址 https://github.com/moor-mupan/mine-summary/tree/master/前端知识库/Vuex_demo/demo 1. 什么是Vuex? Vue ...
- vue的挖坑和爬坑之vuex的简单入门
首先vuex的中文文档https://vuex.vuejs.org/zh-cn/ 首先vuex是什么,官方解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...
- NO.01---今天聊聊Vuex的简单入门
作为一款个人认为非常牛x的框架,个人使用起来得心应手,所以近期就记录一下这款框架吧. 首先说一说 Vuex 是什么? 官方给出的解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它 ...
- [转] vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- Vuex教程简单实例
什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. ...
- 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
- vuex最简单的
https://segmentfault.com/a/1190000009404727 "dependencies": { "axios": " ...
随机推荐
- luogu 2279 [HNOI2003]消防局的设立 树形dp
就是细节多一些,思路都非常常规. Code: #include <bits/stdc++.h> #define N 1005 #define inf 1061109567 #define ...
- node 中的global对象和process对象
官方文档:http://nodejs.cn/api/ 因为Node.js是运行在服务区端的JavaScript环境,服务器程序和浏览器程序相比,最大的特点是没有浏览器的安全限制了,而且,服务器程序必须 ...
- c++继承子类构造函数问题
c++中子类在继承基类的时候需要在构造函数中初始化变量.如果基类没有构造函数或者只有不带参数的构造函数,那么子类中的构造函数就不需要调用基类的构造函数了. 个人总结了两点子类中构造函数必须调用父类的构 ...
- 九款Web服务器性能压力测试工具
一.http_load 程序非常小,解压后也不到100Khttp_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载.但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般不会 ...
- 20191121-5 Scrum立会报告+燃尽图 02
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/10066 一.小组情况 组长:贺敬文组员:彭思雨 王志文 位军营 徐丽君队名 ...
- Java-JVM OutOfMemory 情况(JDK8)
JVM 运行时内存结构(Run-Time Data Areas) 内存溢出分为两大类:OutOfMemoryError 和 StackOverflowError. 一.HeapOomError (JV ...
- 【log4j】log4j.properties 文件示例
# 下面的文件内容是写程序长期要用的,放在这里留个底#Output information(higher than INFO) to stdout and file.info/debug/error ...
- ctf密码学------密文解码python脚本(凯撒解密)
题目来源实验吧 分析题意,说是困在栅栏中,所以将字符栅栏解密看看有什么,利用工具CTFcraktools 得到三条密文 然后说是密码是凯撒,在将四栏依次凯撒解码,寻找可能的key,这里很显然,在尝试第 ...
- jQuery常用AJAX-API
目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取得服务端当前时间 简单形式:jQuery对象.load(url) 返回结果自动添加到jQuery对象代表的标签中间 如果是Servlet的话,采 ...
- DisplayUtils
import android.app.Activity; import android.content.Context; import android.graphics.Rect; import an ...