一.vuex的简介

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想,就是前面所说的单向数据流。图4就是Vuex实现单向数据流的示意图。

  

    Store

    每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state) 。

  

  State

   Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

  Mutations

  Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数(handler)。

  Action

  Action 类似于 mutation,不同在于:

      1.Action 提交的是 mutation,而不是直接变更状态。

      2.Action 可以包含任意异步操作。

二.vuex的配置

  定义store.js

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
//stat里面就是用来定义对象 ---给mutations和actions这两部分使用
state: {
//这里定义了count对象
count: 0,
},
getters: {
doubleCount(state) {
return state.count * 2
}
},
//mutations里面去注册事件---就是定义很多方法,给其他组件用
mutations: {
add(state) {
state.count ++
},
decrease(state) {
state.count --
}
},
//actions里面去使用事件
actions: {
delayAdd(context) {
setTimeout(() => {
context.commit('add')
}, 1000);
}
}
})

  在计算属性中监听对象的变化,并且提供映射

//使用计算属性的方式
computed: {
count() {
return this.$store.state.count
}
} //使用**********辅助函数***********的方式
//引入辅助函数

import { mapState, mapGetters } from 'vuex'
export default {
computed: {
//...mapState表示展开,这样的好处是在computed里面,既能使用辅助函数,也能使用在computed里面使用其他计算属性
    ...mapState({
   
//count: state => state.text.count模块化的方式,vuex模块化之后,只能这样监听计算属性

   count:this.$store.text.count
    }),
...mapGetters([
'doubleCount'
])
},

使用$stor.commit或者dispatch去分别触发 mutations 或者 actions里面的方法

  methods: {
add() {
//this.$store.commit是用来触发mutations
this.$store.commit('add')
//this.$store.dispatch是用来触发actions的操作
this.$store.dispatch('delayAdd')
}
},

三.Vuex模块化的配置

  建立一个store文件夹

  

  将对应的模块导出,引入到index.js里面即可

 四.Vuex中的计算属性getters

【Vue】Vue学习(四)-状态管理中心Vuex的简单使用的更多相关文章

  1. vue项目用户登录状态管理,vuex+localStorage实现

    安装vuex cnpm install vuex --save-dev

  2. Vue状态管理模式---Vuex

    1. Vuex是做什么的? 官方解释: Vuex 是一个专为Vue.js 应用程序开发的 状态管理模式 它采用 集中式存储管理 应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化 ...

  3. Vue状态管理之Vuex

    Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 ...

  4. 理解Vue的状态管理模式Vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理,一听就很高大 ...

  5. vue - 状态管理器 Vuex

    状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.

  6. 五、vue状态管理模式vuex

    一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...

  7. Vue学习记录-状态管理

    要解决的问题 平时的系统开发中,基本都会碰到这个权限问题,需要根据用户的登录状态进行处理.最常见的情况就是“先登录,后使用”.除去打包成APP,无法看到连接外,如果地址栏里直接输入地址就能绕过登录的话 ...

  8. Vue.js状态管理模式 Vuex

    vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 安装.使用 vuex 首先我们在 vue. ...

  9. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

随机推荐

  1. Jacobi与SOR迭代法的实现与性能比较及均匀间距与Chebyshev插值的实现、性能分析及二者生成的插值误差比较

    这篇文章给出(1)Jacobi与SOR迭代法的实现与性能比较及(2)均匀间距与Chebyshev插值的实现.性能分析及二者生成的插值误差比较,给出完整的实现代码,没有进行性能优化,仅供参考. (1)J ...

  2. dom_bom学习

    1. bom是什么? browser object model(浏览器对象模型) 在浏览器中 window指的就是bom对象 //网页重定向 // window.location.href=" ...

  3. 【pytest官方文档】解读fixtures - 7. Teardown处理,yield和addfinalizer

    当我们运行测试函数时,我们希望确保测试函数在运行结束后,可以自己清理掉对环境的影响. 这样的话,它们就不会干扰任何其他的测试函数,更不会日积月累的留下越来越多的测试数据. 用过unittest的朋友相 ...

  4. Android - Handler原理

    Handler的主要作用是收发消息和切线程 功能一:收发消息 简单流程介绍 希望你看完这篇文章后也可以把流程自己讲出来,并且每个环节还可以讲出很多细节 他的消息机制离不开Looper.MessageQ ...

  5. 谈谈C++中的数据对齐

    对于C/C++程序员来说,掌握数据对齐是很有必要的,因为只有了解了这个概念,才能知道编译器在什么时候会偷偷的塞入一些字节(padding)到我们的结构体(struct/class),也唯有这样我们才能 ...

  6. linux中c语言编程main函数和参数

    linux下main函数的的标准调用函数的标准形式 int main(int char,char *argv[]) 在main函数的两个参数中,argc必须是整型变量,其是命令行的参数的数目,argv ...

  7. 一款检测代码中TODO的eslint插件

    一款检测代码中TODO的eslint插件 前言 看了我标题进来的同学应该也知道我做的是个啥东西 没错是一个eslint插件,前端魔法师们日常所使用的工具之一 什么?你不知道eslint是干嘛的--吃鲸 ...

  8. 前端开发:基于cypress的自动化实践

    作为一个伪开发,在一个平台项目中负责前端的开发工作,开发框架为vue,本文我会站在前端开发的角度介绍,我是如何使用cypress的. [x] 如何在vue中使用cypress [x] 如何运行cypr ...

  9. Git 在解决冲突的时候文件覆盖

    更新代码导致被还原或覆盖的场景:1.触发冲突的必要条件是修改同一个文件且修改的位置非常近,否则Git会自动合并其内容避免更新代码导致被还原或覆盖的解决方案1.少修改的地方(生产环境.公网测试环境):推 ...

  10. PAT (Advanced Level) Practice 1041 Be Unique (20 分) 凌宸1642

    PAT (Advanced Level) Practice 1041 Be Unique (20 分) 凌宸1642 题目描述: Being unique is so important to peo ...