vue全家桶-vuex深入讲解

更新时间：2023年01月17日 14:39:54 作者：加蓓努力我先飞

这篇文章主要介绍了vue全家桶-vuex深入讲解，文章内容详细，简单易懂，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

使用

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import system from './modules/system'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        app,
        settings,
        user,
        system
    },
    getters
})

export default store

getters.js

const getters = {
    sidebar: state => state.app.sidebar,
    device: state => state.app.device,
    token: state => state.user.token,
    avatar: state => state.user.avatar,
    name: state => state.user.name,
    currentuserinfo: state => state.system.currentuserinfo,
    count: state => state.system.count,
}
export default getters

system.js

  const system = {
      namespaced: true,
      state: {
          currentuserinfo: {},
          count: 0,
      },
      mutations: {
          SET_CURRENTUSERINFO: (state, currentuserinfo) => {
              state.currentuserinfo = currentuserinfo
          },
          SET_COUNT: (state, count) => {
              state.count = count
          },
      }
  }
  export default system

全局使用：main.js文件中

import store from './store'

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

Vuex概述

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

使用Vuex管理数据的好处：

A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护

B.能够高效的实现组件之间的数据共享，提高开发效率

C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

Vuex中的核心特性

vuex中的主要核心概念如下：

State
Mutation
Action
Getter

A.State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储
例如，打开项目中的store.js文件，在State对象中可以添加我们要共享的数据，如：count:0

在组件中访问State的方式：
1).this.$store.state.全局数据名称  如：this.$store.state.count
2).先按需导入mapState函数： import { mapState } from 'vuex'
然后数据映射为计算属性： computed:{ ...mapState(['全局数据名称']) }

this.$store.state.全局数据名称-组件访问State中的数据的第一种方式

//访问
console.log("1111",this.$store.state.system.count);
<h3>当前最新的count值为：{{$store.state.system.count}}</h3>

组件访问State中的数据的第二种方式：按需导入

 2).先按需导入mapState函数： import { mapState } from 'vuex'
 //将全局数据，用展开运算符映射为当前组件的计算属性
   // 然后数据映射为计算属性： computed:{ ...mapState(['count']) }
 mapState()可以传入对象或者数组
 传入数组用法: mapState(['counte', 'name','age'])
// 传入对象用法：可以重命名store中的数据
  ...mapState({
   sCounter: state => state.name,
   ......
 })
 computed:{
   ...mapState({
      count: state => state.system.count,
      ......
    }), 
  }

B.Mutation

Mutation用于修改变更$store中的数据

只能通过Mutation变更Store数据，不可以直接操作Store中的数据通过这种方式虽然操作起来稍微繁琐点，但是可以集中监控所有的数据变化

this.$store.commit是触发Mutation的第一种方式

1.定义：

  const system = {
      namespaced: true,
      state: {
          count: 0,
      },
      mutations: {
          add(state) {
             //变更状态
              state.count++
          }
      }
  }
  export default system

2.使用

<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.system.count}}</h3>
    <el-button type="primary" @click="btnHandler1">+1</el-button>
  </div>
</template>

<script>
export default {
  name: 'Addition',
  props: {
  },
  data() {
    return {
    }
  },
  computed: {},
  mounted() {},
  methods: {
    btnHandler1() {
      this.$store.commit("system/add")
    },
  }
}
</script>

<style scoped>
</style>

1.传参—定义

mutations: {
          add(state) {
              state.count++
          },
          addN(state, step) {
              state.count += step
          }
      }

2.传参-使用

methods: {
    btnHandler1() {
      this.$store.commit("system/add")
    },
    btnHandler2(val){
      // commit 的作用就是调用某个mutation函数
      this.$store.commit("system/addN",val)
    },

  }

触发Mutation的第二种方式，按需导入

从vuex中按需导入mapMutations 函数

import { mapMutations } from 'vuex'

通过刚才导入的mapMutations 函数，将需要的mapMutations 函数，映射为当前组件的methods方法：

sub(state) {
     state.count--
},
subN(state, step) {
     state.count -= step
},

method:{
    ...mapMutations({
      sub: 'system/sub'
    }),
    btnHandler1(){
      this.sub()//直接引用
    },
    btnHandler2(val){
      this.subN(val)
    },
}

C.Action

Action用于处理异步任务

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation,但Action中还是要通过出发Mutation的方式间接变更数据

this.$store.dispatch()是触发actions的第一种方式

actions: {
          addAsync(content) {
              setTimeout(() => {
                  // 在actions中，不能直接修改state中的数据
                  // 必须通过content.commit() 去触发某个mutations才行
                  content.commit('add')
              }, 1000)
          }

      }

methods: {
    // 异步的让count自增+1
    btnHandler3(){
      // 这里的dispatch函数，专门用来触发actions
      this.$store.dispatch('system/addAsync')
    },
 }

actions携带参数

触发actions异步任务时携带参数

      actions: {
          addNAsync(content, step) {
              setTimeout(() => {
                  // 在actions中，不能直接修改state中的数据
                  // 必须通过content.commit() 去触发某个mutations才行
                  content.commit('addN', step)
              }, 1000)
          },

      }

methods: {
    btnHandler4(){
      // 这里的dispatch函数，专门用来触发actions，传参
      this.$store.dispatch('system/addNAsync',3)
    },
 }

触发actions的第二种方式：按需导入

      actions: {
          subAsync(content) {
              setTimeout(() => {
                  // 在actions中，不能直接修改state中的数据
                  // 必须通过content.commit() 去触发某个mutations才行
                  content.commit('sub')
              }, 1000)
          },
          subNAsync(content, step) {
              setTimeout(() => {
                  // 在actions中，不能直接修改state中的数据
                  // 必须通过content.commit() 去触发某个mutations才行
                  content.commit('subN', step)
              }, 1000)
          },
}

import {mapActions } from 'vuex'

  methods:{
    ...mapActions({
      subAsync: 'system/subAsync',
      subNAsync: 'system/subNAsync',
    }),
    btnHandler3(){
      this.subAsync()
    },
    btnHandler4(){
      this.subNAsync(3)
    },
    }

D.Getter

Getter用于对Store中的数据进行加工处理形成新的数据

它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化

打开store.js文件，添加getters，如下：

使用getters的第一种方式

//system.js文件中的  getters中的showNum
<h3>{{$store.getters['system/showNum']}}</h3>
console.log('$store.state',this.$store.getters['system/showNum']);

使用getters的第二种方式

<h3>{{showNum}}</h3>

  computed: {
    ...mapGetters({
      showNum: 'system/showNum',
    })
  },

代码总结

system.js

  const system = {
      namespaced: true,
      state: {
          currentuserinfo: {},
          count: 0,
      },
      //   只有mutations中定义的函数，才有全力修改state中的数据
      mutations: {
          //   SET_CURRENTUSERINFO: (state, currentuserinfo) => {
          //       state.currentuserinfo = currentuserinfo
          //   },
          //   SET_COUNT: (state, count) => {
          //       state.count = count
          //   },
          add(state) {
              state.count++
          },
          addN(state, step) {
              state.count += step
          },
          sub(state) {
              state.count--
          },
          subN(state, step) {
              state.count -= step
          },
      },
      actions: {
          addAsync(content) {
              setTimeout(() => {
                  // 在actions中，不能直接修改state中的数据
                  // 必须通过content.commit() 去触发某个mutations才行
                  content.commit('add')
              }, 1000)
          },
          addNAsync(content, step) {
              setTimeout(() => {
                  // 在actions中，不能直接修改state中的数据
                  // 必须通过content.commit() 去触发某个mutations才行
                  content.commit('addN', step)
              }, 1000)
          },
          subAsync(content) {
              setTimeout(() => {
                  // 在actions中，不能直接修改state中的数据
                  // 必须通过content.commit() 去触发某个mutations才行
                  content.commit('sub')
              }, 1000)
          },
          subNAsync(content, step) {
              setTimeout(() => {
                  // 在actions中，不能直接修改state中的数据
                  // 必须通过content.commit() 去触发某个mutations才行
                  content.commit('subN', step)
              }, 1000)
          },

      },
      getters: {
          //添加了一个showNum的属性
          showNum(state) {
              return '最新的count值为：【' + state.count + '】';
          }
      }
  }
  export default system

src\views\learnVuex\index.vue

<template>
  <div>
    <my-addition ></my-addition>
    <p>----------------------</p>
    <my-subtranction ></my-subtranction>

  </div>
</template>

<script>
// 导入
import Addition from '@/components/Addition';
import Subtranction from '@/components/Subtranction';
// import Subtranction from '../../components/Addition';
export default {
  name: 'learnVuex',
  props: {},
  //   注册
  components: {
    'my-addition': Addition,
    'my-subtranction': Subtranction
  },
  data() {
    return {

    }
  },
  computed: {},
  mounted(){
    console.log("1111",this.$store.state.system.count);

  },
}
</script>

<style scoped>
</style>

src\components\Addition\index.vue

<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.system.count}}</h3>
    <h3>{{$store.getters['system/showNum']}}</h3>
    <el-button type="primary" @click="btnHandler1">+1</el-button>
    <el-button type="primary" @click="btnHandler2(2)">+2</el-button>
    <el-button type="primary" @click="btnHandler2(3)">+3</el-button>

    <el-button type="primary" @click="btnHandler3">+1 Async</el-button>
    <el-button type="primary" @click="btnHandler4">+3 Async</el-button>
  </div>
</template>

<script>
export default {
  name: 'Addition',
  props: {
  },
  data() {
    return {
    }
  },
  computed: {},
  mounted() {
    console.log('$store.state',this.$store.getters['system/showNum']);
  },
  methods: {
    btnHandler1() {
      this.$store.commit("system/add")
    },
    btnHandler2(val){
      // commit 的作用就是调用某个mutation函数
      this.$store.commit("system/addN",val)
    },
    // 异步的让count自增+1
    btnHandler3(){
      // 这里的dispatch函数，专门用来触发actions
      this.$store.dispatch('system/addAsync')
    },
    // 
    btnHandler4(){
      // 这里的dispatch函数，专门用来触发actions
      this.$store.dispatch('system/addNAsync',3)
    },

  }
}
</script>
<style scoped>
</style>

\src\components\Subtranction\index.vue

<template>
<div>
  <h3>当前最新的count值为：{{count}}</h3>
  <h3>{{showNum}}</h3>
  <el-button type="primary" @click="btnHandler1">-1</el-button>
  <el-button type="primary" @click="btnHandler2(2)">-2</el-button>
  <el-button type="primary" @click="btnHandler2(3)">-3</el-button>

  <el-button type="primary" @click="btnHandler3">-1  Async</el-button>
  <el-button type="primary" @click="btnHandler4">-3  Async</el-button>
</div>
</template>

<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex'
export default {
  name: 'Subtranction',
  props: {},
  data(){
    return{
      
    }
  },
  computed: {
    ...mapState({
      count: state => state.system.count,
    }),
    ...mapGetters({
      showNum: 'system/showNum',
    })
   
  },
  mounted(){
    console.log("mapState",this.count);
  },
  methods:{
    ...mapMutations({
      sub: 'system/sub',
      subN: 'system/subN',
    }),
    ...mapActions({
      subAsync: 'system/subAsync',
      subNAsync: 'system/subNAsync',
    }),
    btnHandler1(){
      this.sub()
    },
    btnHandler2(val){
      this.subN(val)
    },
    btnHandler3(){
      this.subAsync()
    },
    btnHandler4(){
      this.subNAsync(3)
    },
  }
}
</script>

<style scoped>

</style>

以上就是vue全家桶-vuex深入讲解的详细内容，更多关于vue全家桶-vuex的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

教你一招解决vue页面自适应布局
在前端开发的时候经常会遇到这样的困惑,设计师给你的设计稿的尺寸和页面的尺寸不一致,导致了页面无法正常显示,下面这篇文章主要给大家介绍了关于一招解决vue页面自适应布局的相关资料,需要的朋友可以参考下
2022-07-07
vue extend+promise封装全局弹窗组件
这篇文章主要为大家详细介绍了vue extend+promise封装全局弹窗组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue实现监听数值的变化，并捕捉到
这篇文章主要介绍了vue实现监听数值的变化，并捕捉到问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue.js的vue-cli脚手架中使用百度地图API的实例
今天小编就为大家分享一篇关于vue.js的vue-cli脚手架中使用百度地图API的实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
vue子传父关于.sync与$emit的实现
这篇文章主要介绍了vue子传父关于.sync与$emit的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue3输入框生成的时候如何自动获取焦点详解
记录一下自己最近开发vue3.0的小小问题,下面这篇文章主要给大家介绍了关于vue3输入框生成的时候如何自动获取焦点的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
Vue实现炫酷的代码瀑布流背景
这篇文章主要为大家详细介绍了Vue实现炫酷的代码瀑布流背景，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
vue 文件切片上传的项目实现
本文主要介绍了vue 文件切片上传的项目实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
Vue.js 60分钟轻松入门
Vue.js提供了简洁、易于理解的API，帮助大家快速灵活掌握Vue.js。这篇文章主要介绍了如何在60分钟内轻松学习Vue.js，感兴趣的小伙伴们可以参考一下
2016-11-11
vue3系统进入页面前的权限判断和重定向方式
这篇文章主要介绍了vue3系统进入页面前的权限判断和重定向方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03