VUE-CLI学习第七天

2023-11-19

VUE-CLI学习第七天

vue_vuex学习
- vuex结构
- 引入vuex
- vuex的使用
- - state
  - mutation
  - action
  - modules
  - getters
- 对象解构
- vuex模块封装

vue_vuex学习

vuex结构

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    },
    getter: {
    }
})

state : state中保存了数据，可以放在各个组件中的数据，组件想要获取到数据，有两种方式
mutation : mutation只做纯粹的state数据修改操作，mutation需要被提交（commit）才能执行
action : action可以进行异步请求，将数据commit给mutation。action中还可以进行数据处理，将数据处理成mutation可以直接使用的数据
modules : store的子模块，为了开发大型项目，方便状态管理而使用的
getters : 对state属性进行计算，可以理解类似于Vue中computed

引入vuex

import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vuex的使用

state

src/store/index.js

export default new Vuex.Store({
  state: {
    counter: 10
  }
})

App.vue

<template>
    <div id="app">
        <div>{{$store.state.counter}}</div>
    <div>
</template>

mutation

src/store/index.js

export default new Vuex.Store({
  state: {
    counter: 10,
  },
  mutations: {
    addCounter(state) {
      state.counter++
    },
    addCountNum(state, num) {
      state.counter += num
    },
    addStudent(state, stu) {
      state.student.push(stu)
    }
  }
})

App.vue

<template>
  <div id="app">
    <div>{{$store.state.counter}}</div>
    <div @click="add">+</div>
    <button @click="addNum(10)">10+</button>
    <button @click="addStudent">stu+</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  methods: {
    add(){
      this.$store.commit('addCounter')
    },
    addNum(num) { //传参提交
      this.$store.commit('addCountNum', num)
    },
    addStudent() { //传参提交（参数为对象）
      let stu = {name: 'test', age: 50};
      this.$store.commit('addStudent', stu)
    }
  }
}
</script>

mutation添加和删除state

<template>
  <div id="app">
    <div>{{$store.state.info}}</div>
</template>
<script>

export default {
  name: 'App',
  components: {
  },
  methods: {
    updata(){
      this.$store.commit('updataIn')
    }
  }
}
</script>

export default new Vuex.Store({
  state: {
    info: {
      age: 12,
      name: 'xxx'
    }
  },
  mutations: {
    updataIn(state) {
      //使用set增加state，第一个属性为修改的对象，第二个属性为key/index，第三个属性为值
      // Vue.set(state.info,'address','ShangHai')
      //使用delete删除state，第一个属性为修改的对象，第二个属性为key/index
      // Vue.delete(state.info,'age')
    }
  }
})

mutation的提交风格

这种方式在store中接收到的为num的值

//vue中的method提交
this.$store.commit('addCountNum', num)
//store接收
addCountNum(state, num) {
    state.counter += num
}

这种方式在store中接收到的为对象

//vue中的method提交
this.$store.commit(
    type:'addCountNum',
    num
)
//store接收
addCountNum(state, num) { //此时的num为一个对象，而传来的num为对象里的属性，num可写为payload
    state.counter += num.num
}

action

通常情况下mutation的方法必须是同步方法，主要是devtools不能捕捉到mutation的异步操作会什么时候完成
action类似于mutation，但是是用来替代mutation完成异步操作的

常规使用

src/store/index.js

export default new Vuex.Store({
  state: {
    info: {
      age: 12,
      name: 'xxx'
    }
  },
  mutations: {
    updataIn(state) {
      state.info.name = 'test'
    }
  },
  actions: {
    //context:上下文
     updataInfo(context,payload){
       setTimeout(() => {
         context.commit('updataIn')
         console.log(payload.message)
         payload.success()
       },1000)
     }

})

App.vue

<template>
  <div id="app">
    <div>{{$store.state.info}}</div>
    <button @click="updata">updata</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  methods: {
    updata(){
      this.$store.dispatch(
          'updataInfo',
          {
            message: '传递的信息',
            success: () => {
              console.log('传递成功')
            }
          }
      )
    }
  }
}
</script>

结合Promise使用

src/store/index.js

export default new Vuex.Store({
  state: {
    info: {
      age: 12,
      name: 'xxx'
    }
  },
  mutations: {
    updataIn(state) {
      state.info.name = 'test'
    }
  },
  actions: {
    //context:上下文
    updataInfo(context,payload){
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('updataIn')
          console.log(payload.message)
          payload.success()
          resolve('111')
        },1000)
      })
    }
  }
})

App.vue

<template>
  <div id="app">
    <div>{{$store.state.info}}</div>
    <button @click="updata">updata</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  methods: {
    updata(){
      this.$store.dispatch(
          'updataInfo',
          {
            message: '传递的信息',
            success: () => {
              console.log('传递成功')
            }
          }
      ).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

modules

src/store/index.js

const moduleA ={
  state: {
    name: '2020/08/07'
  },
  mutations: {
    updata(state) {
      state.name = '08/07'
    }
  },
  action: {},
  getters:{
    updataName(state) {
      return state.name + '/00'
    },
    fullname(state, getters, rootState) {
      return getters.updataName + rootState.counter
    }
  }
}

export default new Vuex.Store({
  modules: {
    a: moduleA
  }
})

App.vue

<template>
  <div id="app">
    <div>{{$store.state.a.name}}</div>
    <div>{{$store.getters.updataName}}</div>
    <div>{{$store.getters.fullname}}</div>
    <button @click="updataName">updataName+</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  methods: {
    updataName() {
      this.$store.commit('updata')
    }
  }
}
</script>

使用modules中的state时，$store后需接上定义的模块名
使用modules中的mutations时，与之前相同，commit里的type类型是统一的，首先会搜先store，之后再搜索其他模块，所以mutations之间最好不要同名
使用modules中的action时，与之前相同，dispatch里的type类型是统一的，首先会搜先store，之后再搜索其他模块，所以action之间最好不要同名
使用modules中的getters时，与之前相同，所以getters之间最好不要同名
modules内可使用rootState参数来获取store里state的数据,可使用rootGetters参数来获取store里getters的数据，其他可直接调用

getters

src/store/index.js

export default new Vuex.Store({
  state: {
    counter: 10,
    student: [
      {name: 'joe', age: 21},
      {name: 'jack', age: 15},
      {name: 'curry', age: 40}
    ]
  },
  getters: {
      //处理state里的值并返回
    powerCounter(state){
      return state.counter * state.counter
    },
    //处理并筛选state里的对象并返回
    more20stu(state) {
      return state.student.filter(item => {
        return item.age >= 20
      })
    },
    // 引用其他getters方法获取处理值
    more20stuLen(state, getters) {
      return getters.more20stu.length
    },
    //实现动态传参
    moreAgestu(state){
      return age => {
        return state.student.filter(item => {
          return item.age >= age
        })
      }
    }
  }
})

App.vue

<template>
  <div id="app">
    <div>{{$store.state.counter}}</div>
    <div>{{$store.getters.powerCounter}}</div>
    <div>{{$store.getters.more20stu}}</div>
    <div>{{$store.getters.more20stuLen}}</div>
    <div>{{$store.getters.moreAgestu(30)}}</div>
  </div>
</template>

对象解构

这种方式可以将context内的值赋值给相应的参数

const context = {
  state; 'xxx',
  commit: 'yyy',
  rootState: 'zzz'
}
const {state, commit, rootState} = context

这样操作所得：state = context.state,commit = context.commit,rootState = context.rootState

modules中的实例

const moduleA ={
  state: {
    name: '2020/08/07'
  },
  mutations: {
    updata(state) {
      state.name = '08/07'
    }
  },
  action: {
    //对象解构
    test ({state, commit, rootState}) {
      console.log(state.name);
      commit('updata');
      console.log(rootState.counter);
    }
  }
}

vuex模块封装

如果项目过大的话代码仅仅放在index.js文件中会显得代码十分拥挤且不利于维护，所以我们可以将模块抽离出来，以下是抽离的文件目录：
在这里插入图片描述

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from "@/store/mutations";
import actions from "@/store/actions";
import moduleA from "@/store/modules/moduleA";
import getters from "@/store/getters";

Vue.use(Vuex)

const state = {
  counter: 10,
  student: [
    {name: 'joe', age: 21},
    {name: 'jack', age: 15},
    {name: 'curry', age: 40}
  ],
  info: {
    age: 12,
    name: 'xxx'
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
    a: moduleA
  },
  getters
})

motations.js(其他文件也与此文件相同)

export default {
    addCounter(state) {
        state.counter++
    }
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

VUE-CLI学习第七天的相关文章

Java面向对象——多态、Object类、instanceof关键字以及final关键字

多态的概念 1 多态是指同一个方法调用可以在不同的对象上有不同的表现即同一种方法调用方式适用于不同的数据类型编译时和运行时编译时期调用的是父类中的方法但运行时期会根据实际的对象类型来调用适当的方法这种行为称为动态绑定即运行时决定

随机推荐

提取labelme标注文件信息（json转txt）文本检测四边形坐标标注提取

功能说明将labelme标注的json文件中的坐标和label信息提取到txt文件中一般用于检测类任务 ps 这里使用四边形类别标注方式每个点坐标包括x和y 所以总共输出8个坐标值和1个label值软件 labelme 3 1
DCMTK读取DICOM文件头信息的三种方法

Howto Load File Meta Header Here s an example that shows how to load the File Meta Information Header of a DICOMfile wit
2020年pubg服务器维护时间,7月25日pubg维护一般多久绝地求生正式服稳定更新

2018年7月25日绝地求生正式服进行了官方维护时间大约持续3小时主要维护内容是提高客户端稳定性维护结束后玩家需重新启动steam客户端获取更新自定义服务器匹配为了让每位玩家可以创建自己的游戏房间我们以不限号测试的方式开放了
关于使用NodeJS+Express搭建服务器访问静态资源的一些填坑经验

前言 NodeJs是一个能让前端开发工程师变成全栈工程师的神器最近在搞一个私活需要上传图片到服务器存储按照以前的想法是用Java写代码搭服务器奈何大学毕业后就一直在搞前端和安卓开发 Java写服务端的技术已经忘得差不多了好在J
leetcode动态规划总结之01背包和完全背包问题

1 背包问题分类其中除了01背包和完全背包外 leetcode题目中好像还没有涉及其他类型的背包在这里我就不做总结 2 01背包理论有N件物品和一个最大承载重量为W 的背包第i件物品的重量是weight i 其价值是value i
树莓派4b 开启热点，设置自身ip与手机vnc连接

此方法开启的热点无法访问网络 1 下载现成的工具 git clone https github com oblique create ap git 如果无法访问github 这里下载 2 编译 cd create ap sudo make
原码，反码，补码，阶码，移码

本文转载自本站大佬不去上课原文链接https blog csdn net ruidianbaihuo article details 87875178 原码反码补码阶码移码是什么有什么区别讨论机器数的表示本文内容参考自王达
osgEarth的Rex引擎原理分析（二）osg是如何根据文件扩展名寻找需要加载的动态链接库插件的

在一中有createLibraryNameForFile 它会根据文件扩展名构造需要加载的动态链接库 osgDB Registry cpp ReaderWriter ReadResult Registry read const Read
JVM远程调试功能开启，与原理

前言以前有篇文章讲解Tomcat开启远程调试功能只是讲解了用法以及Tomcat的作者书写脚本的初衷原理没写其实不是Tomcat的具有远程调试功能是JVM虚拟机提供的能力 Java应用都能开启远程调试能力上一篇文章 tomca
程序“catkin_init_workspace”尚未安装。您可以使用以下命令安装： sudo apt install catkin

程序 catkin init workspace 尚未安装您可以使用以下命令安装 sudo apt install catkin 问题如图先贴上解决后的效果运行环境 ubuntu 16 04 ros版本 kinetic 问题解释这个
MATLAB上使用FasterRcnn实现目标（温湿度计）检测

本文硬件环境是 win7 64位 MATLAB R2018a 由于第一次接触目标检测很多东西只是照猫画虎不甚了解将自己成功的测试流程记录如下方便和自己有同样需求的人拿来就用减少学习过程中的不必要的困难主要参照资料1和4中的方法
TCP连接阻塞的监控和处理

TCP连接阻塞的监控和处理那么什么样的TCP连接属于上述发生阻塞的异常连接呢结合线上运维经验我们整理出符合该类异常的特征如下该连接的Recv Q的值特别大超过3M 该连接的Recv Q的值持续上涨造成堆积在一定滑动时间窗口内
一、MM Segmentation 介绍与安装

时间 2022年4月1日内容学习MM Segmentation MM Segmentation 介绍和理解 MM Segmentation 利用注册器和配置文件实现了可拓展性和易用性它是一个封装了许多语义分割深度神经网络的框架
solidity经典案例----智能小游戏

参考于https ke qq com webcourse 2379017 103111126 taid 10365401060101385 vid 5285890802017890711 1 案例功能介绍平台方部署智能合约用户选择下大或
pytorch.onnx.export方法参数详解，以及onnxruntime-gpu推理性能测试

Torch onnx export执行流程 1 如果输入到torch onnx export的模型是nn Module类型则默认会将模型使用torch jit trace转换为ScriptModule 2 使用args参数和torch j
C++ 拷贝构造函数的用法

当用一个已初始化过了的自定义类类型对象去初始化另一个新构造的对象的时候拷贝构造函数就会被自动调用也就是说当类的对象需要拷贝时拷贝构造函数将会被调用以下情况都会调用拷贝构造函数一个对象以值传递的方式传入函数体一个对象以值传递的方
服务器命令使用

服务器命令使用一常用命令二实际经常使用的命令 1 ls 列出目录内容 2 unzip 7z x 解压文件夹命令一级目录一级目录一级目录一常用命令 ls 列出目录内容 cd 切换目录 pwd 显示当前工作目录的路径 mkdi
Nginx反向代理(负载均衡)和作为web服务器的使用

一安装启动Nginx 1 官网下载 URL http nginx org en download html 解压后如下 2 启动nginx有很多种方法启动nginx 1 直接双击nginx exe 双击后一个黑色的弹窗一闪而过或者点击右
我怎样一步一步引导ChatGPT写完一篇本科毕业论文

先了解毕业论文相关专家给ChatGPT指定一个角色我给ChatGPT指定一个学术导师角色好家伙给我谦虚起来了好换个方式他开始听话了了解论文格式计算机科学与技术专业论文一般有哪些部分组成选题了解方向请先告诉我计算机科学
VUE-CLI学习第七天

VUE CLI学习第七天 vue vuex学习 vuex结构引入vuex vuex的使用 state mutation action modules getters 对象解构 vuex模块封装 vue vuex学习 vuex结构 src

VUE-CLI学习第七天

VUE-CLI学习第七天

vue_vuex学习

vuex结构

引入vuex

vuex的使用

state

mutation

action

modules

getters

对象解构

vuex模块封装

VUE-CLI学习第七天 的相关文章

随机推荐

热门标签

VUE-CLI学习第七天的相关文章