博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vuex笔记
阅读量:6196 次
发布时间:2019-06-21

本文共 2335 字,大约阅读时间需要 7 分钟。

1、vuex——数据仓库,管理的是状态,是一个专门为vue.js设计的集中式状态管理架构。

状态:可以理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。
比如:我们有几个页面要显示用户名称和用户等级、或者显示用户的地理位置。如果我们不把这些属性设置为状态,那每个页面遇到后,都会到服务器进行查找计算,返回后再显示。在中大型项目中会有很多共用的数据,所以就有了vuex。

2、vuex小demo之显示count并且可以进行加减操作

a.首先npm install vuex --save 本地安装vuex,一定要加上 –save,因为这个包我们在生产环境中是要使用的
b.新建vuex文件夹,里面新建store.js,并且引入vue和vuex
import Vue from 'Vue';
import Vuex from 'Vuex';
Vue.use(Vuex); //注册使用
c.store.js:新建常量对象count,并且通过
export default new Vuex.Store({
state,
mutations
})导出到外部使用
d.在components文件夹下新建vue模板,在模板中引入store.js文件,import store from '@/Vuex/store'

{
{msg}}

{
{$store.state.count}}
导出:export default({ data(){ return msg:'Vuex' }, store //注册 }) 输出count的值:{
{$store.state.count}}
e.在store.js文件中加入两个改变state的方法                count mutations = {                    add(state){                        state.count++;                    },                    reduce(state){                        state.count--;                    }                }        这里的mutations是固定的写法,意思是改变的,我们要改变state的数值的方法,必须写在mutations里。

3、state

一种状态对象,共享值
将状态对象赋值给内部对象,也就是把store.js中的值,赋值到模板中使用(和模板中获得data的方法类似了)
赋值方式有三种:
a.通过计算属性
<h3>{
{count}}</h3>
computed:{
count(){
return this.$store.state.count;
}
}
b.通过数组操作
首先引入mapState
import {mapState} from 'vuex';
然后计算属性:
computed:mapState(['count']),
4、Mutations修改状态(同步)
mutations存在的意义,就是写方法改变状态store中的共享值,可传递参数,如下图
count mutations = {
add(state,n){
state.count+=n;
}
}
使用:<button @click="$store.commit('add',10)"></button> //使用方法是用$store.commit(),而不是直接add(),注意了!!!
如果不想在html里面使用$store.commit()这么繁琐,而是想直接用add(),和methods里面的方法一样的用法,那么也可以:
首先引入mapMutations
import mapMutations from 'vuex'
然后定义methods
methods:mapMutations(['reduce']),
即可在模板里面使用了: <button @click="reduce()"></button>
5、getters计算过滤操作
getters:相当于store仓库里的computed,状态每操作一次,都会经过getters过滤一次,类似一个安检门,然后返回给用户
es6 ...操作符,用于将一个数组||类数组||字符串转为用逗号分隔的参数序列,展开数组
这家伙是用来对数组进行操作的,把数组里面的东西统统拿出来
功能是把数组或类数组对象展开成一系列用逗号隔开的值

6、actions异步修改状态(异步)

转载于:https://blog.51cto.com/9161018/2322199

你可能感兴趣的文章
8.Kubernetes Service(服务)
查看>>
iOS开发库的族“.NET研究”谱介绍
查看>>
图解DevExpress RichEditControl富文本的使用,附源码及官方API
查看>>
三级联动---城市地区选择
查看>>
剖析 Laravel 计划任务--避免重复
查看>>
公司框架遇到的问题
查看>>
详解 Discuz 的 PHP经典加密解密函数 authcode
查看>>
Mysql XX 天之内
查看>>
Oracle如何删除表中重复记录
查看>>
nginx 是如何处理访问请求的
查看>>
wget参数用法详解
查看>>
【COCOS2D-X(1.X 2.X)】Json(cpp版)以及添加自定义字体库教程
查看>>
使用curl命令查看访问url的时间
查看>>
whois
查看>>
python添加环境变量
查看>>
Linux 新手容易犯的 7 个错误
查看>>
DP-01背包 (题)
查看>>
WinForm中跨线程操作控件
查看>>
CODING 敏捷实践完全指南
查看>>
unittest测试框架和测试报告的输出实例(一)
查看>>