1.简单化理解

首先你要明白 vuex 的目的 就是为了 集中化的管理项目中 组件所有的 数据状态 (state)

0. 第一步你要明白 , store 的重要性 , store 类似一个中央基站,所有的信号和数据处理都必须 由 store 来处理 , store 其实本质也是一个对象 , 里面有 这 四个 必传的 属性 state actions mutations

1. state 是一个 对象 ,高于任何组件层面的对象,所以任何组件可以通过 mapState 获取到 你想要的 state 里面的数据 ,其中 mapState 其实就数据分发 , 通过ES6 改造 this.$store.state. 来取值

2. action 这个其实 就是 信号源 , 你要修改 state ,就要发送 (dispatch) action ,通知store 提交(commit) mutations ,

3. actions 写完 ,就紧接着写 mutations, mutation 负责 修改数据 ,接收action 发送过来的数据 , 修改state

4. state 修改完毕后 ,vuex的响应式数据系统 会重新刷新 组件

5. 你在组件里面需要做的就是 发送信号 ,通过store , 怎么发送信号呢,就是发出 action, 你可以 this.$store.dispatch('actionType',传递的参数) 或者 mapActions 来 直接取到 action , 然后函数触发

2.Vuex的安装使用

安装:
npm i vuex -S

引入:
import vuex from "vuex"

注入:
Vue.use(vuex)

创建store
export let store = new vuex.Store({
state:...,
mutations : ...,
....
})

将store实例注入到初始化代码中
new Vue({
data : ....,
....,
store:store
})

state : 封装数据模型
mutation : 封装修改数据模型方法 (必须是纯函数,必须是同步函数)
getter : 对数据模型进行二次计算 (相当于store的计算属性)
action : 封装业务逻辑 可以是非纯函数 也可以封装异步方法 (封装业务逻辑)

modules : 将多个小的store组装成大的store (用于store的拆分)
除了数据模型 其他的几个都是可全局访问的 为了避免开发时命名冲突 可开启局部命名空间

namespaced : 值为true时开启局部作用域

在组件内 需要通过计算属性将state中的数据传递给模板
{
computed : {
list : function(){
return this.$store.state.list
}
}
}

调用mutation : this.$store.commit("name",data)
this.$store.commit("home/name",data) //开启命名空间时
name为封装的mutation名 data为要传给mutation的数据 我们称之为载荷

调用getter : this.$store.getters["name"]
this.$store.getters["home/name"] //开启命名空间时

调用action : this.$store.dispath("name",data)
this.$store.dispath("home/name",data) //开启命名空间时
data同样为载荷

工具方法
mapState mapGetters mapMutations mapActions

使用:
{
data:...,
...,
computed:{
...mapState({
n : state=>state.name,
name : "name"
}),
...mapState(["name"]),
...mapState("home",["name"]),//开启命名空间时
}
}

vuex简单化理解和安装使用的更多相关文章

  1. vuex深入理解 modules

    一.什么是module? 背景:在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理 ...

  2. 关于vuex的理解

    刚开始学vue的时候,看到很多项目都有用vuex,抱着一种好奇的心态去看下vuex的官方文档,如下: Vuex官方文档 Vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 ...

  3. 对vuex的理解

    我用的vue安装了一个插件vuex插件 有3个 文件夹分别是actions(用于数据请求),getters(用于监听store),store(用于存储数据),

  4. vuex 深入理解

    参考自:https://mp.weixin.qq.com/s?src=11&timestamp=1528275978&ver=922&signature=ZeHPZ2ZrLir ...

  5. 转一篇关于vuex简单理解的文章

    学习vuex半天摸不着头脑无意间发现了这篇文章 对vuex做了一个简单的阐述比较有助于我的理解 现在分享出来希望能给一些朋友一点帮助  这个是原文地址 http://www.ituring.com.c ...

  6. jenkins的理解及安装

    目录 一.理论概述 二.安装 一.理论概述 Jenkins的介绍 ​ Jenkins是一个基于MIT License协议的开源软件项目,是基于Java开发的一种持续集成(CI)工具,用于监控持续重复的 ...

  7. Vuex的理解以及它的辅助函数

    理解:vue中的“单向数据流”,这里借用官网的图示: Vue是单向数据流,v-model只是语法糖而已.单向数据流就是:数据总是[向下传递]从父级组件传递给子组件,只能单向绑定.子组件内部不能直接修改 ...

  8. Vuex之理解Getters的用法

    一.什么是getters在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用 ...

  9. vuex的理解

    首先需要了解vuex的基本概念和使用方式,vue的官网也有很详细的说明或者浏览:https://zhuanlan.zhihu.com/p/24357762. vue是单页应用所以当页面刷新时vuex的 ...

随机推荐

  1. SpringBoot中使用Maven插件,上传docker镜像

    开启docker远程端口 我上一篇里面写了,这里暴露的路径: 18.16.202.95:2375 简单构建 配置pom.xml文件 在properties中增加一行指定远程主机的位置 <prop ...

  2. HTTP协议之chunk,单页应用这样的动态页面,怎么获取Content-Length的办法

    当客户端向服务器请求一个静态页面或者一张图片时,服务器可以很清楚的知道内容大小,然后通过Content-Length消息首部字段告诉客户端需要接收多少数据.但是如果是动态页面等时,服务器是不可能预先知 ...

  3. arguments简单函数 求整数递加和

    function add(n){if(n == 1) return 1;else return n + arguments.callee(n-1);alert(arguments.callee(1)) ...

  4. ESA2GJK1DH1K基础篇: Android连接MQTT简单的Demo

    题外话 我老爸也问我物联网发展的趋势是什么!!!!!! 我自己感觉的:(正在朝着 "我,机器人" 这部电影的服务器方向发展) 以后的设备都会和服务器交互,就是说本地不再做处理,全部 ...

  5. 浅谈C/C++回调函数(Callback)& 函数指针

    摘要:回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是 ...

  6. 将float数字按照一定格式写入到文件中

    /* float.c */ #include<stdio.h> #include<string.h> int main() { FILE *fp = fopen("D ...

  7. 每日一问:不一样的角度吐槽下 DataBinding

    我们项目采用的是 kotlin && DataBinding 处理的,可能你会疑问,既然用的是 kotlin,为啥没有用 kotlinx?新的页面当然是用的 kotlinx 啦,但我们 ...

  8. 20165230田坤烨网络对抗免考报告_基于WIN10的渗透攻击

    目录 简单信息收集 主机发现 ping nmap 端口扫描 nmap OS及服务版本探测 nmap -sV 绕过防火墙尝试 诱饵 随机数据长度 随机顺序扫描目标 MAC地址欺骗 实现win10的渗透攻 ...

  9. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  10. leetcode 763. 划分字母区间

    题目描述: 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 示例 1: 输入: S = "a ...