总结: vue2中的基础语法(一)
总结: vue2中的基础语法(二)
总结: vue2中的基础语法(三)
总结: vue2中的基础语法(四)

1.vue项目中使用vuex

vuex是官方提供的独立于组件体系之外的, 管理公共数据的工具. 采用集中式存储管理应用的所有组件的状态, 解决多组件数据通信.

它的数据也像data一样是响应式的, 集中的管理方案可以让代码更加的简洁; 方便维护.

也就是如果一个项目想做大的话, 必须使用vuex; 如果仅止步于父传子, 子传父这样父子组件之间的数据传输的话, 项目是无法做大的.

如果是在老项目中就需要下包:
①npm i vuex@3.6.2
②配置

 2.1 创建store文件夹 --> index.js2.2 书写配置项:2.2.1 创建Vuex.store实例2.2.2 向Vue实例注入store

当然在创建项目之初就可以将vuex模块一起下载

2.vuex定义公共样式state并在组件中使用

stare核心属性类似于data, 可以说直接向data一样使用即可.

在store中配置state

在组件中调用state的数据
使用this.$store.state.数据方法调用即可.

3.vuex定义mutations且在组建中使用mutations

mutations使用来修改动态修改state中的数据的.

格式:

mutations: {mutations1(state, newDate) { // state是必传的, 它就是state核心属性业务代码......},mutations2(state, newDate) { // 后面的形参可以传多个, 但是必须是以对象的格式传入业务代码......}
}

配置项

组件中调用mutations中定义的方法
使用this.$store.commit(‘mutaions中的方法名’, 形参1 或 { 形参1,形参2… }).
在配置项接收, 然后修改对应的state数据即可.

4.vuex使用getters的派生状态

它就是在state的基础上对数据进一步的加工处理, 也就是computed(计算属性)

配置getters

getters: {getters1(state) { // state是必传, state就是核心属性return 业务代码......}
}

组件中使用getters
使用$store.getters.getters中的方法名.

5.vuex使用actions发送异步请求

actions属性主要的作用就是发送异步请求(如: ajax).

也就是将整个ajax操作封装到vuex内容, 减少重复代码

格式

actions: {actions1(content) { // content相当于store对象, 是自动传入的对象; 类似于event对象axios.get('后端接口地址').then((返回数据) => {业务代码......// 在actions中不能直接操作state中的数据, 需要通过mutations中的定义的方法来访问, 如:// content.commit('mutation中的方法')})}
}

在组件中调用
使用this.$store.dispatch(‘actions方法名’)

6.vuex使用modules拆分复杂的业务

因为在实际开发过程中, vuex中的数据都写在一起的话会很复杂; 所以vue就提供了modules用来拆分相同类的数据.

拆分方法一

export default new Vuex.Store({// state: 用来保存所有的公共数据state: {},getters: {},mutations: {},actions: {},modules: {模块名1： {// namespaced为true，则在使用mutations时，就必须要加上模块名namespaced: true, state: {},getters: {},mutations: {},actions: {},modules: {}}，模块名2： {// namespaced不写，默认为false，则在使用mutations时，不需要加模块名state: {},getters: {},mutations: {},actions: {},modules: {}}  }
})

拆分方法二
在store文件夹中重新定义一个模块

访问模块中的数据，要加上模块名

获取数据项：  {{$store.state.模块名.数据项名}}
获取getters： {{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions:
如果namespaced为true，则需要额外去补充模块名
如果namespaced为false，则不需要额外补充模块名

$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true$store.dispatch('actions名')        // namespaced为false
$store.dispatch('模块名/actions名')  // namespaced为true

在组件中使用模块中调用state
使用 {{ $store.state.模块名.数据 }}
注意自己定义的模块还是会被合并到store中去的, 如图:

在组件中使用模块中调用mutations
使用 this.$store.commit(‘模块名/方法名’)

在组件中使用模块中调用getters
使用 $store.getters[‘模块名/方法名’]

在组件中使用模块中调用actions
使用 this.$store.dispatch(‘模块名/方法名’)

总结: Vue2中基础语法(五)相关推荐

Python基础语法(五)—常用模块和模块的安装和导入
Python基础语法(五)-常用模块的使用和模块的安装和导入,本文介绍的Python模块有:os.sys.time.datetime.random.pickle.json.hashlib.shutil ...
英语基础语法——五种基本句式
英语的五种基本句式 Sv (主谓) Svp (主系表) Svo (主谓宾) SvoO (主谓宾宾) Svoc (主谓宾补)
python基础语法手册-python语法手册
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 常用的也不超过十个,这种相对于更为复杂的html标记语言来说,markd ...
java基础语法（精简版）
文章目录目录文章目录一.运算符 1.算数运算符 2.赋值运算符 3.关系运算符(比较运算符) 4.逻辑运算符 5.三元运算符 6.字符的"+"操作 7.字符串的+操作二.流 ...
在Android中使用OpenGL ES开发第（五）节：GLSL基础语法
一.前期基础储备笔者之前的四篇文综述了Android中使用OpenGL ES绘制基本图形和实现了简单的相机预览,初次接触OpenGL ES开发的读者可能对其中新的概念比较迷惑,尤其是其中的顶点着色器 ...
python中四种进制的输出_Python基础语法和进制
基础语法开发种常用的快捷键键位功能 ctrl + / 添加注释和取消注释 ctrl + s 保存 ctrl + c 复制 ctrl + v 粘贴 ctrl + x 剪切 ctrl + z 撤销 ...
[Python从零到壹] 五.网络爬虫之BeautifulSoup基础语法万字详解
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
（五）Kotlin简单易学基础语法-初始函数（下）
(五)Kotlin简单易学基础语法-初始函数(下) 函数内联 ➢ lambda可以让你更灵活的编写应用,但是,灵活也要付出代价的. ➢在JVM上,你定义的lambda会以对象实例的形式存在,JVM会 ...
python中使用什么表示代码块、不需要使用大括号_Python3 基础语法
Python3 基础语法阅读 (129) | 发布于 2020-05-11 18:12:32 编码 # -*- coding: utf-8 -*- 这是代码的编码方式.不是程序要处理的数据的编码方式 ...

总结: Vue2中基础语法(五)

目录