vue的核心是store,它可以看作是一个容器,它包含着应用中的状态state(state,mutations,actions,getters,  modules).它中的存储是响应式的,当store中的状态发生改变时,相应的组件也会发生变化.仓库中的状态值是不能直接改变的,
唯一的改变就是通过显示的提交(commit
mutations).状态主要是通过调用mutations中方法来进行改变的.
  
  state 可以看做是状态的定义,或者说是属性.{
获取state中的属性:$store.state.dialog.count}其中dialog是提出去的状态模块. mutations 如果我们操作的对象,需要好多状态,这时候mutations应运而生, {调用mutations中的方法:$store.commit('switch_dialog')}来触发 mutations 中的 switch_dialog 方法,该里面的方法主要是用来改变
        state中的状态值,其中第二个数,可以作为参数传递
  actions 如果需要执行多个mutations,就需要使用actions,$store.dispatch('switch_dialog')来触发actions中的 switch_dialog 方法,也可以传递参数
  getters 是用来计算state 然后生成新的数据 ( 状态 ) 的。 如果很多很多个组件中都需要用到这个与 show 刚好相反的状态 , 
      那么我们需要写很多很多个 not_show , 使用 getters 就可以解决这种问题 :$store.getters.not_show,getters方法中也可以接受其他getters参数作为第二参数,
      也可以通过传递参数给getters中.$store.getters['dialog/getParamer'](1)

一些辅助函数:

import { mapState,mapGetters,mapMutations,mapActions} from 'vuex' //辅助函数
computed:{
...mapState({count:state =>state.other.count}) 若使用模块化,使用这个来获取状态
...mapState({aaaaa:'count'}) 若vuex中没有使用模块化,可用这个来获取状态
}
...mapGetters({
getTest:'getTest',
}
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}

我自己对这几个的理解区别是:
  state 是属性.它的值获取可以根据状态的模块来进行取值,即使两个状态名称相同,也可以取到不同的值
  
mutations 是改变属性,调用的过程,是调用所有状态模块中mutations 中的该方法,所以两个状态都会按照各自的方式进行改变
actions 是调用mutations中的方法,如果它调用的是所有状态模块中的方法,所以mutations中所有的该方法有几个,就会执行几次
  getter 主要是获取计算状态的值,相当于计算属性.该方法所有的状态模块应当只能是唯一的名称,如果另外的状态模块也有这个方法,控制台会报错,但是不会影响运行,数值将会取在最前模块的值
 
为了解决上面相互依赖的问题,我们可以使用namespaced = true 属性来绑定路径
 
配置之后使用:
$store.state.dialog.show用来获得状态
使用 $store.commit('switch_dialog') 来触发 mutations 中的 switch_dialog 方法
mutations 中的方法是不分组件的 ,mutations里的操作必须是同步的。只是官方推荐 , 不要在 mutationss 里执行异步操作而已。 多个 state 的操作 , 使用 mutations 会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了。官方推荐 , 将异步操作放在 action 中。
$store.dispatch('switch_dialog') 来触发 actions 里的 switch_dialog 方法
***********最好方法名是独一无二的,因为他会执行所有的当前的方法********* $store.getters.not_show 来获得状态 not_show 。
那么 , 如果很多很多个组件中都需要用到这个与 show 刚好相反的状态 , 那么我们需要写很多很多个 not_show , 使用 getters 就可以解决这种问题 :
注意 : $store.getters.not_show 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。 为了方便起见:使用mapState、mapGetters、mapActions 就不会这么复杂了
mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中。 例:
 <template>
<el-dialog :visible.sync="show"></el-dialog>
</template> <script>
import {mapState} from 'vuex';
export default {
computed:{ //这里的三点叫做 : 扩展运算符
...mapState({
show:state=>state.dialog.show
}),
}
}
</script>

 

vuex相关的知识的更多相关文章

  1. .NET同步与异步之相关背景知识(六)

    在之前的五篇随笔中,已经介绍了.NET 类库中实现并行的常见方式及其基本用法,当然.这些基本用法远远不能覆盖所有,也只能作为一个引子出现在这里.以下是前五篇随笔的目录: .NET 同步与异步之封装成T ...

  2. Spring Framework------>version4.3.5.RELAESE----->Reference Documentation学习心得----->Spring Framework中web相关的知识(概述)

    Spring Framework中web相关的知识 1.概述: 参考资料:官网documentation中第22小节内容 关于spring web mvc:  spring framework中拥有自 ...

  3. iOS蓝牙开发(二)蓝牙相关基础知识

    原文链接: http://liuyanwei.jumppo.com/2015/07/17/ios-BLE-1.html iOS蓝牙开发(一)蓝牙相关基础知识: 蓝牙常见名称和缩写 MFI ====== ...

  4. iOS网络相关零散知识总结

    iOS网络相关零散知识总结 1. URL和HTTP知识 (1) URL的全称是Uniform Resource Locator(统一资源定位符). URL的基本格式 = 协议://主机地址/路径   ...

  5. 深入理解mysql之BDB系列(1)---BDB相关基础知识

        深入理解mysql之BDB系列(1) ---BDB相关基础知识 作者:杨万富   一:BDB体系结构 1.1.BDB体系结构 BDB总体的体系结构如图1.1所看到的,包括五个子系统(见图1.1 ...

  6. 【RAC】RAC相关基础知识

    [RAC]RAC相关基础知识 1.CRS简介    从Oracle 10G开始,oracle引进一套完整的集群管理解决方案—-Cluster-Ready Services,它包括集群连通性.消息和锁. ...

  7. vue.js和vue-router和vuex快速上手知识

    vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...

  8. Linux实战教学笔记19:Linux相关网络知识梳理

    第十九节 Linux相关网络知识梳理 标签(空格分隔): Linux实战教学笔记-陈思齐 一,前言 一个运维有时也要和网络打交道,所以具备最基本的网络知识,对一个运维人员来说是必要的.但,对于我们的工 ...

  9. day 28 网络基础相关的知识

    1.网络基础相关的知识 架构 C/S 架构:  client 客户端  server服务器端 优势: 能充分发挥PC机的性能 B/S 架构: browser 浏览器 server服务器       隶 ...

随机推荐

  1. XMU 1612 刘备闯三国之桃园结义 【二分】

    1612: 刘备闯三国之桃园结义 Time Limit: 1000 MS  Memory Limit: 128 MBSubmit: 181  Solved: 12[Submit][Status][We ...

  2. bzoj2323: [ZJOI2011]细胞

    这题真神... 首先看到这么花里胡哨的题面眉头一皱就发现这个球的大小是搞笑的不然就没法做了,有用的是最终拆出来的长度 然后对于一段长度为n有n-1个丝状物的东西,写一个DP:f[i][2]表示枚举到第 ...

  3. YTU 2426: C语言习题 字符串排序

    2426: C语言习题 字符串排序 时间限制: 1 Sec  内存限制: 128 MB 提交: 262  解决: 164 题目描述 用指向指针的指针的方法对5个字符串排序并输出.要求将排序单独写成一个 ...

  4. 二.OC基础--1,对象的存储细节,2,#pragma mark指令,3,函数和对象方法的区别,4,对象和方法之间的关系 ,5.课堂习题

    1,对象的存储细节, 1. 当创建一个对象的时候:Person *p1 = [Person new],做了三件事情: 1,申请堆内存空间: 2,给实例变量初始化: 3,返回所申请空间的首地址; 2. ...

  5. 【POJ 1734】 Sightseeing Trip

    [题目链接] 点击打开链接 [算法] floyd求最小环 输出路径的方法如下,对于i到j的最短路,我们记pre[i][j]表示j的上一步 在进行松弛操作的时候更新pre即可 [代码] #include ...

  6. 【Codeforces 915E】 Physical Education Lessons

    [题目链接] 点击打开链接 [算法] 线段树,注意数据量大,要动态开点 [代码] #include<bits/stdc++.h> using namespace std; ; ,root ...

  7. Java-Runoob-高级教程-实例-字符串:09. Java 实例 - 字符串小写转大写

    ylbtech-Java-Runoob-高级教程-实例-字符串:09. Java 实例 - 字符串小写转大写 1.返回顶部 1. Java 实例 - 字符串小写转大写  Java 实例 以下实例使用了 ...

  8. 276D

    贪心 想了一会觉得没什么很好的方法,看了题解 我们枚举每个二进制位,对于l,r如果这位相同就异或到答案里,否则停止,这里肯定是r比l大,也就是r这位是1而l是0,那么我们就让r这位选1,l选0,然后把 ...

  9. java.util.Optional

    public class OptionalDemo { public static void main(String[] args) { //创建Optional实例,也可以通过方法返回值得到. Op ...

  10. phpstudy 集成的mysql 无法启动

    问题产生: 安装好phpstudy后,Apache可以启动,Mysql无法启动.  解决方法: 之前已经装过Mysql,要把系统服务里面的MySQL删除,留下MySQLa服务. 在cmd命令行下输入: ...