Vue之Vuex
一.什么是vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是一个数据统一管理工具
二.如何使用vuex
首先肯定是要下载vuex ,使用 npm install vuex --save-dev 下载
引入vuex,这里我建议如果数据量不大把vuex所有的属性单独写到一个js文件里面,方便管理
import Vuex from 'vuex' //使用vuex Vue.use(Vuex);//调用vuex
三.使用state创建数据,它用来创建一些初始数据,以方便各个组件之间来回调用
var state = {
num:0
}
四.有时候我们需要从 store 中的 state 中派生出一些状态,就使用getters
const getters={
num: state => {
return state.num
}
}
五.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
const mutations = {
addNum(state){
state.num++
}
}
六.Action 类似于 mutation,不同在于:1.Action 提交的是 mutation,而不是直接变更状态。2.Action 可以包含任意异步操作
const actions = {
addNum({commit}){
commit('addNum')
}
}
七.导出
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
七.在main.js中引入vuex
import store from './vuex' //这个vuex为你的写vuexjs文件 new Vue({
store,
el: '#app',
render: h => h(App)
})
八.在vue组件中使用vuex
import {mapGetters,mapActions} from 'vuex' export default {
data(){
return {
}
},
computed:{
...mapGetters([
'num'
]), },
methods:{
...mapActions([
'addNum'
])
} }
Vue之Vuex的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?
在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天 ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用
一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: index.js如下: import Vue from 'vue'; import ...
- vue+vue-router+vuex实战
shopping vue + vue-router + vuex实现电商网站 效果展示 install 下载代码: git clone https://github.com/chenchangyuan ...
- 15.vue动画& vuex
Vue.config.productionTip = false; ==是否显示提示信息== ==import/export== export xxx 必须跟跟对象或者和定义一起 对象: export ...
- Vue、Vuex+Cookie 实现自动登陆 。
概述 1.自动登陆实现思路. 2.vuex + cookie 多标签页状态保持. 自动登陆的需求: 1.登陆时勾选自动登陆,退出登陆或登陆到期后再次登陆后自动填写表单(记住密码)或访问登陆页自动登陆. ...
- 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)
阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...
- vue:vuex详解
一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...
随机推荐
- Gson解析复杂的Bean类实现Parcelable
import java.util.ArrayList; import android.os.Parcel; import android.os.Parcelable; import android.s ...
- AngularJS1.X学习笔记5-加强版的表单
大家愚人节快乐!表单是沟通服务器端和客户端的桥梁,为数据从客户端传到服务端打开了一扇大门.AngularJS增加了一些新特性,使我们能够更加方便的操作表单.OK!开始学习!学习使我快乐. 一.双向数据 ...
- 奇葩问题:同样的字符串equal为false
问题:什么情况下 "同样" 的字符串会不equal呢?例如 "a".equal("a") => false 在你看来,这可能是个 ...
- Activity的切换动画
Activity在切换或者退出的时候可以自定义动画的,比如AlphaAnimation.TranslateAnimation.ScaleAnimation等自定义的动画.我们在Activity启动的时 ...
- 处理json数据的空数据为任意字符
处理json数据的空数据为任意字符 有时候从后台返回来的数据需要处理一下,根据实际开发需求,不能在页面上直接显示空字符,需要显示为"无内容"或者其他字段,而有些json数据结构比较 ...
- Android -- Annotation(注解)原理详解及常见框架应用
1,我们在上一篇讲到了EventBus源码及3.0版本的简单使用,知道了我们3.0版本是使用注解方式标记事件响应方法的,这里我们就有一个疑问了,为什么在一个方法加上类似于"@Subscrib ...
- JavaScript 函数的定义-调用、注意事项
函数定义 函数语句定义 function(a,b){ return a+b; } 表达式定义 var add = function(a,b){return a+b}; //函数表达式可以包含名称,这在 ...
- NOIP2009T3最优贸易
洛谷传送门 看到这个题,原本想先从后往前dfs,求出能到终点的点,再在这些点里从前往后spfa,用一条边上的两个城市的商品价格的差来作边权,实施过后,发现图中既有负边权,又有回路,以及各种奇奇怪怪的东 ...
- React的学习(下)
摘要 众所周知,前端三大框架Angular.React.Vue,所以为了跟上时代的步伐,最近开始着手学习React,这时候就发现个大问题,框架一直在更新,提倡的编写语法也在更新,网上有许多教程都是一两 ...
- Array和ArrayCollection作为数据源的一个应用区别
在不用[Enabled]元标签的前提下,将一个Array赋值给DataGrid.DataList等控件的DataProvider后,当Array值发生改变时,控件显示内容不会及时更新(可调用控件的in ...