vuex的核心概念和基本使用详解

 更新时间:2021年12月14日 16:28:50   作者:前端Bin  
这篇文章主要为大家介绍了vuex的核心概念和基本使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

介绍

Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享

开始

安装

①直接下载方式

创建一个 vuex.js 文件 将https://unpkg.com/vuex这个网址里的内容放到该文件夹里。

②CND方式

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

③NPM方式

npm install vuex --save

④Yarn方式

yarn add vuex

NPM方式安装的使用方式

1.在 scr 文件里创建一个 store / index.js 的文件夹,写入以下内容。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
})

2.在main.js 里引入,然后挂载到 Vue 实例里

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

store概念及使用

概念:

就是组件之间共享数据的。

只有 mutations 才能修改 store 中的数据

使用:

先定义后使用

定义

state: {
  num: 0
}

使用

方式1(推荐)

<div>{{ numAlias }}</div>

import { mapState } from 'vuex'
export default {
  //计算函数
  computed: mapState({
    // 传字符串参数 'count' 等同于 `state => state.count`
    numAlias: 'num',//常用key是自己起的名随便 value接收的数据
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
    //可以定义其余的计算函数
  }),
  //或者这样
  //计算函数
  computed: {
    mapState(['count'])
  }
}

方式2

<div>{{ $store.state.count }}</div>

mutations概念及使用

概念:

修改store里的数据,严格规定不能在其余的地方修改store的数据,mutations里不要执行异步操作。

mutation 必须同步执行,不能异步执行。

使用:

先定义方法后使用

定义

mutations: {
	//increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要
    increment (state, parameter) {
        // 变更状态
        state.num++
    }
}

使用

方式1(推荐使用)

import { mapState, mapMutations } from 'vuex'
//方法
methods: {
	...mapMutations([
	    // mutations自定义的方法名
    	'increment'
    ]),
    love() {
    	// 直接this调用 this.increment('需要传过去的数据,可不要')
        this.increment('Bin')
    }
}

方式2

methods: {
    love() {
    	// this.$store.commit('自定义的名称', '传过去的数据,可不传')
    	this.$store.commit('increment', 'data')
    }
}

action概念及使用

概念:

用于处理异步操作。

如果通过异步操作变更数据,必须通过action,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据。

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更数据(状态)。
  • Action 可以包含任意异步操作。

定义

mutations: {
	//increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要
    increment (state, parameter) {
        // 变更状态
        state.num++
    }
},
actions: {
	//add 自定义方法 context是参数,可以把它当作vuex的实例
    add(context) {
    	//可以通过context.commit('mutations中需要调用的方法')
    	context.commit('increment')
    }
}

使用

方式1(推荐)

import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions([
      'add', // 将 `this.add()` 映射为 `this.$store.dispatch('add')`
      // `mapActions` 也支持载荷:
      'add' // 将 `this.add(amount)` 映射为 `this.$store.dispatch('add', amount)`
    ]),
    ...mapActions({
      add: 'add' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    }),
    love() {
    	// 直接this调用 this.add('需要传过去的数据,可不要')
    	this.add(data)
    }
  }
}

方式2

methods: {
    love() {
    	// this.$store.dispatch('自定义的名称', '传过去的数据,可不传')
    	this.$store.dispatch('add', data)
    }
}

getters概念及使用

概念:

getter用于对store中的数据进行加工处理形成新的数据。getting可以对store中已有的数据加工处理之后形成新的数据,类似Vue的计算缩写。

定义

state: {
  num: 0
},
getters: {
    doneTodos: state => {
    	return state.num = 10
    }
}

使用

方式1(推荐)

<div>{{ doneTodos }}</div>

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  //计算函数
  computed: {
  	...mapState(['count']),
  	...mapmapGetters(['doneTodos'])
  }
}

方式2

<div>{{ $store.getters.doneTodos }}</div>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • Vue的MVVM实现方法

    Vue的MVVM实现方法

    本篇文章主要主要介绍了Vue的MVVM实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue3纯前端实现Vue路由权限的方法详解

    Vue3纯前端实现Vue路由权限的方法详解

    这篇文章主要给大家介绍了关于Vue3纯前端实现Vue路由权限的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用Vue3具有一定的参考学习价值,需要的朋友可以参考下
    2022-05-05
  • Vue的data为啥只能是函数原理详解

    Vue的data为啥只能是函数原理详解

    这篇文章主要为大家介绍了Vue的data为啥只能是函数原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue获取v-for异步数据dom的解决问题

    vue获取v-for异步数据dom的解决问题

    这篇文章主要介绍了vue获取v-for异步数据dom的解决问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue实现主题切换的多种思路分享

    vue实现主题切换的多种思路分享

    最近一段时间,一直在做主题方面的工作。我们的主题,并不是简单切换一下颜色,或者排版变化这些,而是变化比较大的主题。比如说:主题1和主题2看起来完全不一样,功能甚至都不一样。这样,通过切换css就无法做到了,因此我思考良久,使用了如下2种方法
    2021-06-06
  • Vue开发配置tsconfig.json文件的实现

    Vue开发配置tsconfig.json文件的实现

    tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项,本文就来介绍一下Vue开发配置tsconfig.json文件的实现,感兴趣的可以了解一下
    2023-08-08
  • Vue——前端生成二维码的示例

    Vue——前端生成二维码的示例

    这篇文章主要介绍了Vue——前端生成二维码的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • Vue点击切换Class变化,实现Active当前样式操作

    Vue点击切换Class变化,实现Active当前样式操作

    这篇文章主要介绍了Vue点击切换Class变化,实现Active当前样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 后台使用freeMarker和前端使用vue的方法及遇到的问题

    后台使用freeMarker和前端使用vue的方法及遇到的问题

    这篇文章主要介绍了后台使用freeMarker和前端使用vue的方法及遇到的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue项目中定时器无法清除的原因解决

    vue项目中定时器无法清除的原因解决

    页面有定时器,并且定时器在离开页面时,有清除,本文主要介绍了vue项目中定时器无法清除的原因解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02

最新评论