一.什么是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的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?

    在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天 ...

  3. Vue中Vuex的详解与使用(简洁易懂的入门小实例)

    怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...

  4. vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

    一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: ​ index.js如下: import Vue from 'vue'; import ...

  5. vue+vue-router+vuex实战

    shopping vue + vue-router + vuex实现电商网站 效果展示 install 下载代码: git clone https://github.com/chenchangyuan ...

  6. 15.vue动画& vuex

    Vue.config.productionTip = false; ==是否显示提示信息== ==import/export== export xxx 必须跟跟对象或者和定义一起 对象: export ...

  7. Vue、Vuex+Cookie 实现自动登陆 。

    概述 1.自动登陆实现思路. 2.vuex + cookie 多标签页状态保持. 自动登陆的需求: 1.登陆时勾选自动登陆,退出登陆或登陆到期后再次登陆后自动填写表单(记住密码)或访问登陆页自动登陆. ...

  8. 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)

    阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...

  9. vue:vuex详解

    一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...

随机推荐

  1. Gson解析复杂的Bean类实现Parcelable

    import java.util.ArrayList; import android.os.Parcel; import android.os.Parcelable; import android.s ...

  2. AngularJS1.X学习笔记5-加强版的表单

    大家愚人节快乐!表单是沟通服务器端和客户端的桥梁,为数据从客户端传到服务端打开了一扇大门.AngularJS增加了一些新特性,使我们能够更加方便的操作表单.OK!开始学习!学习使我快乐. 一.双向数据 ...

  3. 奇葩问题:同样的字符串equal为false

    问题:什么情况下 "同样" 的字符串会不equal呢?例如   "a".equal("a")  => false 在你看来,这可能是个 ...

  4. Activity的切换动画

    Activity在切换或者退出的时候可以自定义动画的,比如AlphaAnimation.TranslateAnimation.ScaleAnimation等自定义的动画.我们在Activity启动的时 ...

  5. 处理json数据的空数据为任意字符

    处理json数据的空数据为任意字符 有时候从后台返回来的数据需要处理一下,根据实际开发需求,不能在页面上直接显示空字符,需要显示为"无内容"或者其他字段,而有些json数据结构比较 ...

  6. Android -- Annotation(注解)原理详解及常见框架应用

    1,我们在上一篇讲到了EventBus源码及3.0版本的简单使用,知道了我们3.0版本是使用注解方式标记事件响应方法的,这里我们就有一个疑问了,为什么在一个方法加上类似于"@Subscrib ...

  7. JavaScript 函数的定义-调用、注意事项

    函数定义 函数语句定义 function(a,b){ return a+b; } 表达式定义 var add = function(a,b){return a+b}; //函数表达式可以包含名称,这在 ...

  8. NOIP2009T3最优贸易

    洛谷传送门 看到这个题,原本想先从后往前dfs,求出能到终点的点,再在这些点里从前往后spfa,用一条边上的两个城市的商品价格的差来作边权,实施过后,发现图中既有负边权,又有回路,以及各种奇奇怪怪的东 ...

  9. React的学习(下)

    摘要 众所周知,前端三大框架Angular.React.Vue,所以为了跟上时代的步伐,最近开始着手学习React,这时候就发现个大问题,框架一直在更新,提倡的编写语法也在更新,网上有许多教程都是一两 ...

  10. Array和ArrayCollection作为数据源的一个应用区别

    在不用[Enabled]元标签的前提下,将一个Array赋值给DataGrid.DataList等控件的DataProvider后,当Array值发生改变时,控件显示内容不会及时更新(可调用控件的in ...