vuex 知识点
Action 类似于 mutation，不同在于：
1.Action 提交的是 mutation，而不是直接变更状态。
2.Action 可以包含任意异步操作。mutation是同步的，当需要异步操作的时候，就需要dispatch一个action。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
actions: {
increment (context) {
context.commit('increment')
}
}
实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：
等价于上面的代码。
actions: {
increment ({ commit }) {
commit('increment')
}
}
问：页面触发action进行请求，发现vuex state中的状态确实发生了变化，但是页面需要刷新才能渲染列表？
答：我想到的解决方法：1.判断state的对应状态有值后，进行相应操作；2.用computed或watch，如果值变化，进行相应操作。namespaced: true 配置的作用：
通过 [文件名]/[value] 的方式访问值，而不用挂载到全局namespace。
export const myModule = {
// This makes your getters, mutations, and actions accessed by, eg: 'myModule/myModularizedNumber' instead of mounting getters,
// mutations, and actions to the root namespace.
namespaced: true,
state: {
myModularizedNumber: 0
},
getters: {
myModularizedNumber: state => state.myModularizedNumber
},
mutations: {
setModularizedNumber(state, newNumber) {
state.myModularizedNumber = newNumber
}
}
}
- 修改store里别的module中值的方法：
1.在要修改值的module中，写一个mutation；
2.在vue组件中触发的话，语句如下：
this.$store.commit('[module_name]/[mutation]')
store中的值，在mutations中才能修改。
从store中取时间，并做倒计时显示在页面上：
- data中定义要在页面上显示的数据：time
data () {
return {
time: ''
}
},
- computed中定义数据的处理：
computed: {
modifyTime () {
if (this.user !== null) {
return this.countDown(this.user.platform.modifyTime)
}
return ''
}
- methods中定义处理数据的函数：
methods: {
countDown (time) {
},
state作为store的唯一数据源而存在，在组件里可以使用this.$store.state来获取，但是这个数据是只读的，无法直接通过给this.$store.state赋值来达到赋值的效果。这时就轮到mutation出场了。
mutation是唯一能更改store中的状态（state）的方法，这个相当于事件，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。在 Vue.js devtools 中，mutations有type、payload 两个值。
vuex管理的是组件的状态，用getters可以让一个组件获取多个store中的states。
访问vuex中的数据和方法:
this.$store.state.数据名
this.$store.getters.方法名mapGetters 辅助函数（...mapGetters）仅仅是将 store 中的 getters 映射到局部计算属性，其实也就是从 getters 中获取对应的属性，跟解构类似。
如果所有计算属性的名称都与 state 一致，可以在 mapState 中以数组的方式进行映射。如果 Vue 中已经存在计算属性，可以通过 ES6 的展开操作符 (...) 进行组合。
获取store中数据的2种方式（因为store的数据有可能还不存在，所以需要判断下）：
1.在computed中获取
2.在watch中获取获取vuex组件store中值的2种方式：
1.组件computed中获取store中的值（推荐）
computed: {
show: function () {
return this.user !== null
},
form: function () {
if (this.show === true) {
let obj = _.cloneDeep(this.user) // 深拷贝一份state数据
// 对obj的数据进行处理，便于显示
return obj
}
return null
},
...mapState({
user: state => state.user.auth
})
},
2.组件template中获取store中的值：
{{ $store.state.user.auth.nick | emptyFilter }}
:src=" $store.state.user.auth.icon "
vuex中的modules:
可以在一个module下，再新建一个modulemethods中自己定义的函数名，不要和methods中...mapActions({})中的函数同名；
如果同名的话，vue不知道该执行哪个。使用如下语句引入modules时，必须在此文件夹的index.js中引入各module对应的js文件。
import * as modules from './modules'
vuex 知识点的更多相关文章
- vuex知识笔记，及与localStorage和sessionStorage的区别
菜单快捷导航 Vuex是什么东东,有什么应用场景?localStorage和sessionStorage能否替代它? Vuex知识点State.Getter.Mutaion.Action Vuex模块 ...
- vuex的实用知识点
本文系统介绍vuex的全部内容 为什么用vuex 组件通信知道吧,相信很多同学,刚学的时候很难懂,实时上在实际应用中,大型项目如果使用最原始的组件通信会非常的麻烦,主要体现在多层嵌套的组件之间的通信, ...
- vuex相关知识点
vuex简单理解转载博客 vuex从入门到入门------state:从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态------Getters:可以很容易地在任何组件中使用它- ...
- vueX基础知识点笔记
vuex是专门用来管理vue.js应用程序中状态的一个插件.他的作用是将应用中的所有状态都放在一起, 集中式来管理.需要声明的是,这里所说的状态指的是vue组件中data里面的属性.简单的来说, 它就 ...
- 19.Vuex详细使用说明-一篇文章涵盖所有知识点
vuex官网: https://vuex.vuejs.org/zh/ 一. 前言 不管是Vue,还是 React,都需要管理状态(state),比如组件之间都有共享状态的需要. 什么是共享状态? 比如 ...
- use vue vuex vue-router, not use webpack
vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...
- 基于vue2.0+vuex+localStorage开发的本地记事本
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github ...
- Vuejs技术栈知识点小结
前言 上家公司的项目主要是使用jQuery和Angular1,然后自己学了React,没想到来到这家公司突然开始做vue,不过vue还是挺容易上手的.下面是vue技术栈的一些总结,都是来自官网,主要是 ...
- 从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇：基于Vuex的权限验证探究
缘起 哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登录进行研究,这一块咱们之前在说第一个项目的时候 ...
随机推荐
- 批量kill Linux环境下的任务
批量kill Linux服务器的进程可以通过ps grep aws xargs 进行结合来完成 比如要kill 全部test.sh 的进程 ps -ef |grep "test.sh ...
- 安装docker CE for CentOS
Uninstall old versions sudo yum remove docker \ docker-client \ dock ...
- 最新的ES 5.0路由算法底层实现
http://www.cnblogs.com/bonelee/p/6078947.html 里分析了ES bulk实现,其中路由代码: ShardId shardId = clusterService ...
- js数组的方法小结
js中数组是一种非常常用数据结构,而且很容易模拟其他的一些数据结构,比如栈和队列.数组的原型Array.prototype内置了很多方法,下面就来小小总结一下这些方法. 检测数组就不用多说了,使用EC ...
- 进程控制fork vfork，父子进程，vfork保证子进程先运行
主要函数: fork 用于创建一个新进程 exit 用于终止进程 exec 用于执行一个程序 wait 将父进程挂起,等待子进程结束 getpid 获取当前进程的进程ID nice 改变进程的优先级 ...
- win10解除密码
- windows创建窗口、关闭窗口流程
NC,即 non-client 区域,包括标题栏.窗口边框.最大.最小按钮.滚动条等. 一.在调用Windows的::CreateWindowEx函数创建窗口时,一般会先发出 WM_NCCREATE消 ...
- 068——VUE中vuex的使用场景分析与state购物车实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- learning uboot part command
=> part --helppart - disk partition related commands Usage:part uuid <interface> <dev> ...
- js打开、关闭页面和运行代码那些事
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...