耀极客论坛

 找回密码
 立即注册
查看: 618|回复: 0

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

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-9 02:08:28 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了vuex的核心概念和基本使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

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

开始

安装


①直接下载方式

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


②CND方式
  1. ‹script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js">‹/script>
复制代码
③NPM方式
  1. npm install vuex --save
复制代码
④Yarn方式
  1. yarn add vuex
复制代码
NPM方式安装的使用方式

  1.在 scr 文件里创建一个 store / index.js 的文件夹,写入以下内容。
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. export default new Vuex.Store({
  5. state: {},
  6. mutations: {},
  7. actions: {},
  8. modules: {}
  9. })
复制代码
  2.在main.js 里引入,然后挂载到 Vue 实例里
  1. import Vue from 'vue'
  2. import store from './store'
  3. new Vue({
  4.   render: h => h(App),
  5.   store
  6. }).$mount('#app')
复制代码
store概念及使用




概念:
  就是组件之间共享数据的。
  只有 mutations 才能修改 store 中的数据
  使用:
  先定义后使用




定义
  1. state: {
  2.   num: 0
  3. }
复制代码



使用
  方式1(推荐)
  1. ‹div>{{ numAlias }}‹/div>
  2. import { mapState } from 'vuex'
  3. export default {
  4.   //计算函数
  5.   computed: mapState({
  6.     // 传字符串参数 'count' 等同于 `state => state.count`
  7.     numAlias: 'num',//常用key是自己起的名随便 value接收的数据
  8.     // 箭头函数可使代码更简练
  9.     count: state => state.count,
  10.     // 为了能够使用 `this` 获取局部状态,必须使用常规函数
  11.     countPlusLocalState (state) {
  12.       return state.count + this.localCount
  13.     }
  14.     //可以定义其余的计算函数
  15.   }),
  16.   //或者这样
  17.   //计算函数
  18.   computed: {
  19.     mapState(['count'])
  20.   }
  21. }
复制代码
  方式2
  1. ‹div>{{ $store.state.count }}‹/div>
复制代码
mutations概念及使用
概念:
  修改store里的数据,严格规定不能在其余的地方修改store的数据,mutations里不要执行异步操作。
  mutation 必须同步执行,不能异步执行。

使用:
  先定义方法后使用
定义
  1. mutations: {
  2. //increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要
  3.     increment (state, parameter) {
  4.         // 变更状态
  5.         state.num++
  6.     }
  7. }
复制代码
使用
  方式1(推荐使用)
  1. import { mapState, mapMutations } from 'vuex'
  2. //方法
  3. methods: {
  4. ...mapMutations([
  5.     // mutations自定义的方法名
  6.     'increment'
  7.     ]),
  8.     love() {
  9.     // 直接this调用 this.increment('需要传过去的数据,可不要')
  10.         this.increment('Bin')
  11.     }
  12. }
复制代码
  方式2
  1. methods: {
  2.     love() {
  3.     // this.$store.commit('自定义的名称', '传过去的数据,可不传')
  4.     this.$store.commit('increment', 'data')
  5.     }
  6. }
复制代码
action概念及使用
概念:
  用于处理异步操作。
  如果通过异步操作变更数据,必须通过action,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据。
  Action 类似于 mutation,不同在于:
       
  • Action 提交的是 mutation,而不是直接变更数据(状态)。   
  • Action 可以包含任意异步操作。
定义
  1. mutations: {
  2. //increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要
  3.     increment (state, parameter) {
  4.         // 变更状态
  5.         state.num++
  6.     }
  7. },
  8. actions: {
  9. //add 自定义方法 context是参数,可以把它当作vuex的实例
  10.     add(context) {
  11.     //可以通过context.commit('mutations中需要调用的方法')
  12.     context.commit('increment')
  13.     }
  14. }
复制代码
使用
  方式1(推荐)
  1. import { mapState, mapMutations, mapActions } from 'vuex'
  2. export default {
  3.   methods: {
  4.     ...mapActions([
  5.       'add', // 将 `this.add()` 映射为 `this.$store.dispatch('add')`
  6.       // `mapActions` 也支持载荷:
  7.       'add' // 将 `this.add(amount)` 映射为 `this.$store.dispatch('add', amount)`
  8.     ]),
  9.     ...mapActions({
  10.       add: 'add' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
  11.     }),
  12.     love() {
  13.     // 直接this调用 this.add('需要传过去的数据,可不要')
  14.     this.add(data)
  15.     }
  16.   }
  17. }
复制代码
  方式2
  1. methods: {
  2.     love() {
  3.     // this.$store.dispatch('自定义的名称', '传过去的数据,可不传')
  4.     this.$store.dispatch('add', data)
  5.     }
  6. }
复制代码
getters概念及使用
概念:
  getter用于对store中的数据进行加工处理形成新的数据。getting可以对store中已有的数据加工处理之后形成新的数据,类似Vue的计算缩写。
定义
  1. state: {
  2.   num: 0
  3. },
  4. getters: {
  5.     doneTodos: state => {
  6.     return state.num = 10
  7.     }
  8. }
复制代码
使用
  方式1(推荐)
  1. ‹div>{{ doneTodos }}‹/div>
  2. import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
  3. export default {
  4.   //计算函数
  5.   computed: {
  6.   ...mapState(['count']),
  7.   ...mapmapGetters(['doneTodos'])
  8.   }
  9. }
复制代码
  方式2
  1. ‹div>{{ $store.getters.doneTodos }}‹/div>
复制代码
总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 18:37 , Processed in 0.073202 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表