1  首先还是安装 npm install vuex --save、

2 在src这种创建目录为store 创建 index.js  (getters.js ,actions.js ,mutations.js ,state.js)这些是store里面的属性 看情况 一般分这几个文件写,也可以合并写在 index.js ,没有index.js就写在store.js中 ,在index.中引入 (getters.js ,actions.js ,mutations.js ,state.js)这些文件。

而在这些文件中要使用export default {} 把数据包起来暴露出去 另外在index.js/或者store.js中也要引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state, // 状态对象
mutations, // 包含多个更新state函数对象
actions, // 包含多个对应事件回调函数对象
getters // 包含多个getter计算函数的对象
})

3 调用方法 或者 是调用数据

    有两种方法 :

      3.1. this.$store.dispatch('jianNum', { goods: this.good })   dispatch有两个参数

      第一个参数是方法名  它会去actions中找与之对应的方法名(必填)  例如   this.$store.dispatch('jianNum', { goods: this.good }) 它会去actions中找与之对应的方法名jianNum的方法

      第二个参数是 传递过去的参数  以对象的形式传递(非必须)

      3.2 在组件中引入 如:import { mapState, mapActions, mapGetters } from 'vuex'   需要什么引入什么   然后再computed属性中写

      ...mapState(['cartgoods', 'addclass']),  cartgoods是对应 state中的状态对象 一次类推 下同
      ...mapGetters(['isshow', 'allmoney', 'allgoodsnum'])
      在method中写
.     ..mapActions(['clearall'])  clearall 为 actions中的方法       这种调用格式为(['   ']) 
     如下图

4 vuex执行图

5.  小弟才疏学浅 如有错误,谢谢指正

vue学习之vuex的更多相关文章

  1. Vue学习笔记:Vuex

    为什么需要Vuex 管理共享状态 解决一份数据在多个组件中试用的困难 系统化的状态管理,区别于小型状态过来 底层设计模式: 全局单例模式 应用场景 适合中大型项目: 小项目反而会因为引入更多概念和框架 ...

  2. 如何快速上手一个新技术之vue学习经验

    碰到紧急项目挪别人的vue项目过来直接改,但是vue是18年初看过一遍,18年底再来用,早就忘到九霄云外了,结果丢脸的从打开vue开始学,虽然之前在有道云笔记做了很多记录,然后没有系统整理.所以借这次 ...

  3. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  4. Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)

    在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...

  5. vue学习六之vuex

    由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex. 什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 ...

  6. Vue学习日记(四)——Vue状态管理vuex

    前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  9. Vue学习目录

    前面的话 近年来,前端框架发展火热,新的框架和名词不停地出现在开发者眼前,而且开发模式也产生了一定的变化.目前来看,前端MVVM框架的出现给开发者带来了不小的便利,其中的代表就有Angular.js. ...

随机推荐

  1. 企业私有源代码上传github致入侵之大疆案判决了

    事件简单回顾: 1.2017年8月28日,大疆宣布“大疆威胁识别奖励计划”,最高3万美元: 2.然而在此之前,大疆农业事业部某员工将企业私有源代码上传到了github: 3.就职于大疆竞对公司Depa ...

  2. Spring Boot 入门教程 | 图文讲解

    目录 一.Spring Boot 是什么 二.为什么要使用 Spring Boot 三.快速入门 3.1 创建 Spring Boot 项目 3.2 项目结构 3.3 引入 Web 依赖 3.4 编写 ...

  3. Shell学习心得(一):变量

     1.begin #!/bin/bash echo "Hello World !" #! 是一个约定的标记,它告诉系统这个脚本需要什么解释器来执行,即使用哪一种 Shell. ec ...

  4. 命令行中的 vi 模式

    命令行中修改已经输入的命令比较麻烦,如果你不知道一些快捷键的话,只能使用方向键一个一个字符地移动到目标位置进行修改,对于比较复杂且过长的命令来说,效率不高. 以下信息来自 bash 的 man 页面: ...

  5. android事件分发源码分析—笔记

    昨天晚上从源码角度复习了一下android的事件分发机制,今天将笔记整理下放在网上.其实说复习,也是按着<android开发艺术探索>这本书作者的思路做的笔记. 目录 事件是如何从Acti ...

  6. JenKins使用pm2部署.net core网站

    登录事先准备好的 Jenkins 1 新建任务 2 源码管理 git 输入正确地址 3 构建环境:Delete workspace before build startsAbort the build ...

  7. Cookie、LocalStorage 与 SessionStorage的区别在哪里?

    基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通 ...

  8. 为什么HTTPS比HTTP更安全?

    摘要: 理解HTTPS. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 近几年,互联网发生着翻天覆地的变化,尤其是我们一直习以为常的HTTP协议,在逐渐的被HTTPS协议所取代 ...

  9. GridView 的简单应用

    gridView 是android一个控件主要是显示列似与九宫格这样的效果.废话不多说直接上代码. 首先是需要一个适配器来确定每一个里面的布局,在里面我自定义了一个点击事件,当点击图片布局的时候触发, ...

  10. java多线程 生产者和消费者 lock

    package com.atguigu.thread.lock; import java.util.concurrent.locks.Condition; import java.util.concu ...