五分钟搞懂vuex(代码片段)

关键词：

这段时间一直在用vue写项目，vuex在项目中也会依葫芦画瓢使用，但是总有一种朦朦胧胧的感觉。于是决定彻底搞懂它。

看了一下午的官方文档，以及资料，才发现vuex so easy！

作为一个圈子中的人，决定输出一下文档，如果你仔细看完这篇文章，保证你对vuex熟练掌握。

我把自己的代码上传到了github，大家有需要的可以拉下来：github

先说一下vuex到底是什么？

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。

也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

vuex中，有默认的五种基本的对象：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit(‘‘,params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath(‘‘)
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

下面我们正式开始，一步步使用vuex

1、首先创建一个vue-cli项目

执行下面的命令，创建一个app项目（这里也可以使用其他非webpack模板，以及非app名称）

vue init webpack app

2、创建完成之后，我们进入文件夹下，并且运行项目

cd app/
npm run dev

接下来我们在src目录下创建一个vuex文件夹

并在vuex文件夹下创建一个store.js文件

文件夹目录长得是这个样子

3、目前我们还没有引入vuex，我们需要先下载vuex，并且引入它

在保证我们处于我们项目下，在命令行输入下面命令，安装vuex

npm install vuex --save

4、安装成功之后，我们就可以在store.js中尽情玩耍我们的vuex了！

在store.js文件中，引入vuex并且使用vuex，这里注意我的变量名是大写Vue和Vuex　

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

const state = 
    count: 0


export default new Vuex.Store(
    state
)

接下来，在main.js中引入store

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import store from ‘./vuex/store‘ // 引入store
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue(
    el: ‘#app‘,
    router,
    store,
    components:  App ,
    template: ‘<App/>‘
)

然我我们在任意一个组件中就可以使用我们定义的count属性了。

这里我们在helloWorld中使用一下，去除helloworld.vue中不用的标签

<template>
  <div class="hello">
    <h3>$store.state.count</h3>
  </div>
</template>

打开我们刚才运行项目的浏览器，可以看到已经使用成功了！

并且在vue开发工具中我们可以看到我们定义的变量count

到这一步，已经成功了一小半！vuex很简单吧？

回想一下，我们只需要在下载安装使用vuex，在我们定义的store.js中定义state对象，并且暴露出去。

在main.js中使用我们的store.js（这里是为了防止在各个组件中引用，因为main.js中，有我们的new Vue 实例啊！）

现在我们已经使用了vuex中的state，接下来我们如何操作这个值呢？ 没错！用mutations和actions

我们继续操作store.js文件

我们在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。

我们在mutations中定义两个方法，增加和减少，并且设置一个参数n，默认值为0，然后在Vuex.Store中使用它

/**
 * mutations 里面放置的是我们操作state对象属性的方法
 */
const mutations = 
    mutationsAddCount(state, n = 0) 
        return (state.count += n)
    ,
    mutationsReduceCount(state, n = 0) 
        return (state.count -= n)
    

export default new Vuex.Store(
    state,
    mutations
)

然后我们在helloWorld.vue中，使用这个方法

还记得我们如何在组件中使用mutations吗？就和自定义事件非常相似

<template>
  <div class="hello">
    <h3>$store.state.count</h3>
    <div>
      <button @click="handleAddClick(10)">增加</button>
      <button @click="handleReduceClick(10)">减少</button>
    </div>
  </div>
</template>

methods: 
    handleAddClick(n)
      this.$store.commit(‘mutationsAddCount‘,n);
    ,
    handleReduceClick(n)
      this.$store.commit(‘mutationsReduceCount‘,n);
    
  

来浏览器看一下效果如何！

我们可以看到每当触发事件时，我们都可以在vue开发工具中看到我们触发的mutations方法，以及参数

完美！

接下来就是actions，actions是异步操作

创建actions对象，并且使用

这里我在两个方法中使用了两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数。在第二个函数中，我是直接使用了这个对象的commit的方法。

凭大家喜好就行

const actions = 
    actionsAddCount(context, n = 0) 
        console.log(context)
        return context.commit(‘mutationsAddCount‘, n)
    ,
    actionsReduceCount( commit , n = 0) 
        return commit(‘mutationsReduceCount‘, n)
    

export default new Vuex.Store(
    state,
    mutations,
    actions
)

在helloWorld.vue中

在methods中，增加两个方法，使用dispath来触发

 <div>异步操作</div>
  <div>
    <button @click="handleActionsAdd(10)">异步增加</button>
    <button @click="handleActionsReduce(10)">异步减少</button>
  </div>

handleActionsAdd(n)
      this.$store.dispatch(‘actionsAddCount‘,n)
    ,
    handleActionsReduce(n)
      this.$store.dispatch(‘actionsReduceCount‘,n)
    

进入浏览器看下效果如何！

最后就是getters

我们一般使用getters来获取我们的state，因为它算是state的一个计算属性

const getters = 
    getterCount(state, n = 0) 
        return (state.count += n)
    

export default new Vuex.Store(
    state,
    mutations,
    actions,
    getters
)

<h4>count</h4>

const getters = 
    getterCount(state) 
        return (state.count += 10)
    

getters算是非常简单的了。

到这里，如果全都看懂了，vuex你已经没有压力了。

但是vuex官方给了我们一个更简单的方式来使用vuex， 也就是 mapState, mapMutations, mapActions, mapGetters

只要我们把上面基础的搞懂，这些都不在话下，只是方面我们书写罢了。

就这么简单，这里我们用到了es6的扩展运算符。如果不熟悉的同学还是去看看阮一峰大神的《Es6标准入门》这本书，我是看完了，受益匪浅！

<script>
import mapState, mapMutations, mapActions, mapGetters from ‘vuex‘
export default 
  name: ‘HelloWorld‘,
  data () 
    return 
      msg: ‘Welcome to Your Vue.js App‘
    
  ,
  methods: 
    ...mapMutations(
      handleAddClick: ‘mutationsAddCount‘,
      handleReduceClick: ‘mutationsReduceCount‘
    ),
    ...mapActions(
      handleActionsAdd: ‘actionsAddCount‘,
      handleActionsReduce: ‘actionsReduceCount‘
    )
    // handleAddClick(n)
    //   this.$store.commit(‘mutationsAddCount‘,n);
    // ,
    // handleReduceClick(n)
    //   this.$store.commit(‘mutationsReduceCount‘,n);
    // ,
    // handleActionsAdd(n)
    //   this.$store.dispatch(‘actionsAddCount‘,n)
    // ,
    // handleActionsReduce(n)
    //   this.$store.dispatch(‘actionsReduceCount‘,n)
    // 
  ,
  computed: 
    count()
      return this.$store.getters.getterCount
    
  

</script>

同理，getters和 state也可以使用 mapState，mapGetters

如果你更懒的话，我们可以使用数组，而非对象，或者es6里面的对象简写方式

就像这种

最后，如果大家发现有什么问题，或者错误的地方，欢迎留言交流。

给自己五分钟，彻底搞懂并优化冒泡排序(代码片段)

给自己五分钟，彻底搞懂并优化冒泡排序冒泡排序思想算法描述示例冒泡排序的Java代码实现冒泡排序的第一次优化冒泡排序弊端冒泡排序第一版优化冒泡排序第二次优化冒泡排序第二版优化冒泡排序思想给定一个无序数组&#x... 查看详情

五分钟搞懂mysql索引下推(代码片段)

大家好，我是老三，今天分享一个小知识点——索引下推。如果你在面试中，听到MySQL5.6”、“索引优化”之类的词语，你就要立马get到，这个问的是“索引下推”。什么是索引下推索引下推(IndexConditionPushdown&... 查看详情

五分钟搞懂mysql索引下推(代码片段)

大家好，我是老三，今天分享一个小知识点——索引下推。如果你在面试中，听到MySQL5.6”、“索引优化”之类的词语，你就要立马get到，这个问的是“索引下推”。什么是索引下推索引下推(IndexConditionPushdown&... 查看详情

五分钟搞懂pom设计模式(代码片段)

今天，我们来聊聊WebUI自动化测试中的POM设计模式。为什么要用POM设计模式前期，我们学会了使用Python+Selenium编写WebUI自动化测试线性脚本线性脚本（以快递100网站登录举栗）：importtimefromseleniumimportwebdriverfr... 查看详情

给自己五分钟，彻底搞懂并优化冒泡排序(代码片段)

给自己五分钟，彻底搞懂并优化冒泡排序冒泡排序思想算法描述示例冒泡排序的Java代码实现冒泡排序的第一次优化冒泡排序弊端冒泡排序第一版优化冒泡排序第二次优化冒泡排序第二版优化冒泡排序思想给定一个无序数组&#x... 查看详情

五分钟搞懂spring-cloud-square

欢迎访问我的GitHub这里分类和汇总了欣宸的全部原创(含配套源码)：https://github.com/zq2599/blog_demos初识spring-cloud-square2021年4月13日，spring在官方博客上宣布，一个名为SpringCloudSquare的项目正式发布首个公开可用的里程碑版... 查看详情

五分钟搞懂spring-cloud-square

欢迎访问我的GitHub这里分类和汇总了欣宸的全部原创(含配套源码)：https://github.com/zq2599/blog_demos初识spring-cloud-square2021年4月13日，spring在官方博客上宣布，一个名为SpringCloudSquare的项目正式发布首个公开可用的里程碑版... 查看详情

01.springcloud实战项目-五分钟搞懂分布式基础概念

SpringCloud实战项目全套学习教程连载中PassJava学习教程简介PassJava-Learning项目是PassJava（佳必过）项目的学习教程。对架构、业务、技术要点进行讲解。PassJava是一款Java面试刷题的开源系统，可以用零碎时间利用小程序查看常见面... 查看详情

10分钟搞懂vitedevserver，速来围观！(代码片段)

分析version：2.2.3，和我来一场viteserver探寻之旅吧~(❦ω❦)一、初始cli启动服务做了什么？pacakge.json的bin指定可执行文件："bin":     "vite": "bin/vite.js"  在安装带有bin字段的vite包，那可执行... 查看详情

5分钟掌握vuex，深入浅出(代码片段)

5分钟让你掌握Vuex，深入浅出一、什么是Vuex？概念：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单... 查看详情

5分钟掌握vuex，深入浅出(代码片段)

5分钟让你掌握Vuex，深入浅出一、什么是Vuex？概念：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单... 查看详情

5分钟搞懂布隆过滤器，掌握亿级数据过滤算法(代码片段)

...;【码农在新加坡】，欢迎关注。个人博客网站：5分钟搞懂布隆过滤器，掌握亿级数据过滤算法布隆过滤器是什么本质上布隆过滤器(BloomFilter)是一种数据结构，比较巧妙的概率型数据结构（probabilisticdatastructure... 查看详情

实战：5分钟搞懂okhttp断点上传(代码片段)

1、前言经常会有同学问：文件的断点上传如何实现？断点上传/下载，这是在客户端经常遇到的场景，当我们需要上传或下载一个大文件时，都会考虑使用断点续传的方式。断点上传相较于断点下载来说，... 查看详情

不用再怕报错，5分钟彻底搞懂python异常处理(代码片段)

异常处理在工程文件中必不可少，今天就带大家彻底搞定异常处理。喜欢记得收藏、关注、点赞。异常处理在python中我们使用try和except关键字来捕获异常：try下写：不确定能不能正常执行的代码except下写：如果try... 查看详情

最简明的systemd进程管理教程，搞懂只需10分钟~(代码片段)

systemd介绍systemd是目前Linux系统上主要的系统守护进程管理工具，由于init一方面对于进程的管理是串行化的，容易出现阻塞情况，另一方面init也仅仅是执行启动脚本，并不能对服务本身进行更多的管理。所以从Cent... 查看详情

三分钟带你搞懂spring解耦和ioc(代码片段)

前言回想写过的图书管理系统、租房系统、电影院卖票系统都是基于原生的JavaSE、OOP，没有用到任何框架，在层与层的关系中一个类要想获得与其他类的联系主要的方式还是靠new，这就导致层与层之间、对象与对象之... 查看详情

五分钟上手echarts教程(代码片段)

...案例：https://download.csdn.net/download/TroyeSivanlp/33199899五分钟上手ECharts教程1-Echarts-介绍2-了解Echarts的基础配置3-如何在页面上显示简单的图表首先，初始化echarts实例对象第二步，指定配置项和数据(option)第三步，将配... 查看详情

flink/scala实战-18.一套代码搞懂keyedstate(代码片段)

一.引言上文我们介绍了五种KeyedState的特性以及如何初始化，本文基于五种KeyedState，通过一个案例向大家同时介绍五种KeyedState使用方法。-ValueState-ListState-ReducingState-AggregateState-MapState二.准备工作1.数据类型Event//用户浏览行为casec... 查看详情