vuex 一文贯通_细_

已于 2023-07-19 17:03:23 修改
阅读量367 收藏
点赞数 2
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-10-11 10:50:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47124112/article/details/127244161
版权

vuex 的详细使用

https://vuex.vuejs.org/vuex.png
在这里插入图片描述

一、安装 vuex

npm i vuex@3

vue2 使用vuex3，vue3 使用 vuex4

二、搭建 vuex 环境

1. 项目根目录创建 store 文件夹，里面创建 index.js 文件
// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
// 引入 Vuex 
import Vuex from 'vuex'
// 使用 Vuex 插件
Vue.use(Vuex)

// 准备actions--用于响应组件中的动作
const actions  = {}
// 准备mutations--用于操作数据（state）
const mutations = {}
// 准备state--用于存储数据
const state = {}

// 创建并暴露 store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})
2. main.js 做如下配置
import Vue from 'vue'
import App from './App.vue'
// 引入 store
import store from '../store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 传入 store 配置项
  store,
}).$mount('#app')
3. 验证一下

在 Vue.vue组件中进行验证

mounted(){
        console.log(this);
    }

在这里插入图片描述
说明基本配置已经成功

三、vuex 案例

1. 拿值

在 state 先存数据 sum

// state--用于存储数据
const state = {
    sum: 0 // 当前的和
}

然后在 App.vue 组件里拿值

<h3>结果: {{$store.state.sum}}</h3>
2. 进行传参加法运算
// 准备actions--用于响应组件中的动作
const actions  = {
    add(context,value){
        context.commit('ADD',value)
    }
}
// 准备mutations--用于操作数据（state）
const mutations = {
    ADD(state,value){
        state.sum += value
    }
}
// 准备state--用于存储数据
const state = {
    sum: 0 // 当前的和
}

add(context,value){} 第一个参数表示上下文，可拿到你想要的值如 state 里的值等，第二个参数表示 传过来的参数
为了区分 actions 和 mutations ，mutations 最好使用大写

  • actions相当于服务员，mutations相当于后厨
  • actions可以做一些逻辑判断，相当于服务员要询问要不要辣，要不要香菜啥的
  • 然后再通过 mutations 对 state 里的数据进行相关的操作

在 App.vue 中

<template>
  <div>
    <h3>结果: {{$store.state.sum}}</h3>
    <button @click="add">+{{n}}</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            // 每次相加的数
            n: 1
        }
    },
    methods: {
        add(){
            this.$store.dispatch('add',this.n)
        }
    }
}
</script>

在这里插入图片描述
如果 actions 中的方法不需要做一些逻辑判断，可以直接 跳到 mutations，如上面进行加法的运算
在App.vue中更改如下

methods: {
        add(){
            this.$store.commit('ADD',this.n)
        }
    }

此时就不需要经过 actions 中的 add，而是直接使用 mutations 中的 ADD

一开始我在想，为啥不在actions中直接操作 state 呢，如果这样是不能在开发者工具(后面有说到)中看到此操作的，看本文章的第一张图就可以知道，只有mutations 中的操作才被会开发者工具查看到

3. 通过 actions 进行一些判断，只有奇数的时候才可以相加
addOdd(context,value){
        if(context.state.sum % 2 ){
            context.commit('ADD',value)
        }
    }

在 App.vue 中

<button @click="addOdd">奇数加一</button>
<script>
...
addOdd(){
   		this.$store.dispatch('addOdd',this.n)
    }
</script>

在这里插入图片描述

四、开发者工具的使用

vuex 也是 vue 做出来的，所以他们公用一个开发者工具 vue.js devtools
在这里插入图片描述

具体看尚硅谷vue的110集

五、getters 配置项

当需要对 state 中的数据进行一些很复杂的数据处理时，比如对一个数字又乘又除还要开根号也要实现复用等复杂的处理，就可以使用getters 配置项
简单举例：上面中的sum，我要变成十倍

// 用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

// 创建并暴露 store
export default new Vuex.Store({
     ...
    getters,
})

state 可以理解为vue组件中的data
getters 可以理解为 vue组件中的 computed(计算属性)

在 App.vue 中

<h3>放大10倍: {{$store.getters.bigSum}}</h3>

在这里插入图片描述

六、mapState 与 mapGetters

假如 state 中有如下数据

// state--用于存储数据
const state = {
    name: '张三',
    sex: '男',
    age: 18,
}

那么 App.vue 取数据时，就会有点繁琐了

    <h3>姓名：{{$store.state.name}}</h3>
    <h3>姓别：{{$store.state.sex}}</h3>
    <h3>年龄：{{$store.state.age}}</h3>

在插值表达式中是不建议写这么长的，那我们可以使用计算属性

	<h3>姓名：{{xm}}</h3>
	<h3>姓别：{{xb}}</h3>
	<h3>年龄：{{nl}}</h3>
	<script>
	...
    computed:{
        xm(){
            return this.$store.state.name
        },
        xb(){
            return this.$store.state.sex
        },
        nl(){
            return this.$store.state.age
        },
    },
    </script>

可以发现这样写重复的内容非常多，所以 vuex 就有了mapState
使用 mapState

import { mapState } from "vuex"
export default {
computed: {
    // 借助mapState生成计算属性，从state中读取数据。(对象写法)
    ...mapState({xm: 'name', xb: 'sex', nl: 'age'})
  },
}

由于mapstate 是一个对象，所以要使用展开运算符

如果计算属性的名字和state中的命名一致时简写如下

 // 借助mapState生成计算属性，从state中读取数据。(数组写法)
 ...mapState(['name', 'sex', 'age'])

同理，getters 也有 mapGetters
举例：上面我们有一个getters 里面有一个 bigSum，App.vue 中我们可以改成如下：

import { mapState, mapGetters } from "vuex"
export default {
computed: {
	// 借助mapGetters生成计算属性，从getters中读取数据。(数组写法)
    ...mapGetters(['bigSum'])
  },
}

七、mapActions和mapMutations

通过第六节学的mapState 与 mapGetters，大概也知道mapActions和mapMutations的作用了吧
前面我们对state中的sum加一时，使用的是

<button @click="add">+{{n}}</button>
<script>
   data() {
    return {
        // 每次相加的数
        n: 1
      };
  	},
   methods: {
    add() {
      this.$store.commit("ADD", this.n);
    },
 }
 </script>

使用mapMutations时：

<button @click="add(n)">+{{n}}</button>
<script>
import { mapState, mapGetters, mapMutations} from "vuex"
...
methods: {
  // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
  ...mapMutations({add: 'ADD'}),
 }
 </script>

如果方法名和mutations里面的一样也可以使用数组的方法，这里就不举例了

记得在方法里面进行传参

mapActions 你肯定也是会的啦，老样子看一下以前的写法

    <button @click="addOdd">奇数加一</button>
    ...
    addOdd() {
      this.$store.dispatch("addOdd", this.n);
    }

使用 mapActions

<button @click="addOdd(n)">奇数加一</button>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
...
methods: {
  // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
  ...mapActions(['addOdd'])
}
</script>

八、多组件数据共享

其实跟上面的第七没啥区别，下面简单演示一下在 HelloWord.vue 使用vuex

<template>
  <div>
    <h3>姓名：{{name}}</h3>
    <h3>姓别：{{sex}}</h3>
    <h3>年龄：{{age}}</h3>
    <h4>sum的值：{{sum}} 十倍：{{bigSum}}</h4>
    <button @click="addOdd(1)">奇数加一</button>
    <button @click="ADD(1)">加一</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    computed:{
        ...mapState(['name','sex','age','sum']),
        ...mapGetters(['bigSum'])
    },
    methods:{
        ...mapActions(['addOdd']),
        ...mapMutations(['ADD'])
    }
}
</script>

九、vuex 模块化

假如我们做的系统比较大，功能很多，命名也容易冲突等，则不可能把全部代码都放到一个 .js 文件里面，应该进行分类的管理

1. 我们先在一个 .js 文件里面进行分类
// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
// 引入 Vuex 
import Vuex from 'vuex'
// 使用 Vuex 插件
Vue.use(Vuex)

// 计数相关的配置
const countOptions = {
    // 开启命名空间
    namespaced: true,
    actions: {
        add(context, value) {
            context.commit('ADD', value)
        },
        addOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('ADD', value)
            }
        }
    },
    mutations: {
        ADD(state, value) {
            state.sum += value
        }
    },
    state: {
        sum: 1,
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

// 人员信息相关的配置
const personOptions = {
    // 开启命名空间
    namespaced: true,
    actions: {},
    mutations: {},
    state: {
        name: '张三',
    sex: '男',
    age: 18,
    },
    getters: {}
}

// 创建并暴露 store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

使用上面第八的 HelloWord.vue 来进行演示

<template>
  <div>
    <h3>姓名：{{name}}</h3>
    <h3>姓别：{{sex}}</h3>
    <h3>年龄：{{age}}</h3>
    <h4>sum的值：{{sum}} 十倍：{{bigSum}}</h4>
    <button @click="addOdd(1)">奇数加一</button>
    <button @click="ADD(1)">加一</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    computed:{
        ...mapState('countAbout',['sum']), // countAbout 为js开启的命名空间，指定是谁里面的配置
        ...mapState('personAbout',['name','sex','age']),
        ...mapGetters('countAbout',['bigSum'])
    },
    methods:{
        ...mapActions('countAbout',['addOdd']),
        ...mapMutations('countAbout',['ADD'])
    }
}
</script>
  • js 文件中每一个配置都开启命名空间，就是为了后面 .vue 组件中区分每一个配置进行使用
2. 下面我们把相关的配置放在一个独立文件里面

计算相关的放在 count.js 文件里

// 计数相关的配置
export default {
    // 开启命名空间
    namespaced: true,
    actions: {
        add(context, value) {
            context.commit('ADD', value)
        },
        addOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('ADD', value)
            }
        }
    },
    mutations: {
        ADD(state, value) {
            state.sum += value
        }
    },
    state: {
        sum: 1,
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

人员信息相关的配置放在person.js里

// 人员信息相关的配置
export default {
    // 开启命名空间
    namespaced: true,
    actions: {},
    mutations: {},
    state: {
        name: '张三',
    	sex: '男',
    	age: 18,
    },
    getters: {}
}

index.js文件变成

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
// 引入 Vuex 
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
// 使用 Vuex 插件
Vue.use(Vuex)

// 创建并暴露 store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

这样根据功能分成不同的 .js 文件，结构清晰易懂
参考资料
在这里插入图片描述

码客前端
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
一文学会Web_Service漏洞挖掘1
08-03
2.直接告诉给客户端调用者 2.使用Google语法 1.Web 应用安全漏洞: 2.XML 相关的特殊安全漏洞:
rq.zip_并口 电机_并口控制_软驱
09-14
推荐 刚喜欢上机器人，但自己什么设备工具之类的都没有，看了《用并口控制笔记本软驱中的电机》一文后，决定试试。以下是我失败和成功的过程描述
Vuex详解，一文彻底搞懂Vuex
热门推荐
qq_56989560的博客
05-11 17万+
Vuex详解，一文彻底搞懂Vuex
一文读懂nginx gzip_static
James的博客
02-23 4502
Nginx支持静态和动态两种gzip包体压缩方式,分别对应模块ngx_http_gzip_static，ngx_http_gzip。 我们知道gzip是CPU密集型应用，实时动态压缩比较消耗CPU资源。为进一步提高Nginx的性能，我们可以使用静态gzip压缩，提前将需要压缩的文件压缩好，当客服请求到达时，直接发送压缩好的.gz文件，如此就节省了CPU资源，提高了性能。缺省ngx_http_gzip_static模块并未启用，需要重新编译，并使能它 #注:根据需要添加其它参数 ./configure --w
一文讲解Vuex实现原理
认定的总要想办法去完成。
07-02 2094
 对于Vuex相信大家是常用，那么Vuex作为Vue生态中最重要的一部分，专为Vue.js应用的状态管理模式，每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )，并且Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样可以方便地
一文彻底搞懂vuex
田兴的博客
01-04 8347
什么是vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成： 分别是：state,actions,mutations,getters,modules 由五部分组成 state: 数据 actions:可以包含异步操作 mutations: 唯一可以修改state数据的场所 getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存） modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、a.
一文彻底搞懂VueX
RenBaiLi的博客
09-01 163
1. 什么是vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成： 分别是：state,actions,mutations,getters,modules 2. vuex由五部分组成 state: 数据 actions:可以包含异步操作 mutations: 唯一可以修改state数据的场所 getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存） modules:模块化管理store（仓库），每个模块拥有自己的 state、muta.
一文讲透Vuex 组件传值 存值与取值 数据流转 三板斧
qq_45654741的博客
07-05 432
vuex实现数据间流转 vuex三板斧
一文吃透Vuex3的状态管理
前端探险家的博客
06-26 4309
关于Vuex3状态管理的所有知识点，包括Vuex的工作原理和流程，Vuex的安装和使用，有详细代码可以参考；
一文搞定Vue3中使用Vuex
Smell_rookie的博客
07-26 794
伴随着Vue3的出现，基于Vue3的各种插件和框架也都陆续开发出来了。如Vue3对应的Vue-Router4.x和Elementui-plus等等，今天来聊聊基于Vue3的Vuex4.x。vuex4.x的官网如下： https://next.vuex.vuejs.org/ 安装Vuex npm方式 npm install vuex@next --save yarn方式 yarn add vuex@next --save 可以看到现在是使用vuex@next来安装next的版本的，使用以上命令安装的最新版
一文读懂，vuex
银鞍照白马的博客
04-15 579
上篇文章没说的vuex，现在就来全面讲讲vuex。其实我们搞懂下面这几个问题，就能真正理解vuex。 1、什么是vuex？ vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。 2、vuex的属性？ state 存储数据，存储状态；在根实例中注册了store 后，用 this.$store.stat...
Vuex5——pinia
青蛙king的博客
10-05 1391
pinia 官网pinia 是 Vuex 的升级版，被誉为 vuex5。官网也说过，为了尊重原作者，所以取名 pinia，而没有使用 Vuex。pinia 中只有 state、getter、action，抛弃了 Vuex 中的 Mutation，使开发更简单。pinia 中 action 支持同步和异步，Vuex 中 action 中做异步处理，mutation 中做同步处理。pinia 支持 TypeScript。Vue3 推荐使用 TS 来编写，此时使用 pinia 就非常合适了。
DNFESR_1_0.rar_NOISE_damping noise
07-14
Damping Noise-Folding and Enhanced Support Recovery in Compressed Sensing一文的MATLAB源码
一文搞定_合伙人个税律师合伙事务所个税[含私车公用案例].doc
12-06
一文搞定_合伙人个税律师合伙事务所个税[含私车公用案例].doc
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 645
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
【vue-2】v-on、v-show、v-if及按键修饰符
WXG1011的博客
05-21 425
v-on、v-show、v-if及按键修饰符
基于vuestic-ui实战教程 - 页面篇
PleaseBeStrong的博客
05-21 1029
原有的table组件不够美观，想要自己定义的时候就可以用该模板，对于模板的实例如上图我用红色框框框出来的就是几个加入的组件，下面就分别在代码中实现上面的代码中提到了特别多的类型比如UserData 、Pagination 、Sorting 等等，下面就给出这些类型的定义（如下代码定义在api/system/sysUser/types.ts 中）前面两个完全根据后端的实体类对应，而下面三个就是渲染所需要用到的一些类型定义/* sysUser参数类型 *//* sysUser参数类型*/
宝塔部署Java+Vue前后端分离项目
最新发布
liyh722的博客
05-28 196
宝塔部署Java+Vue前后端分离项目
Vue 怎么定义插件以及使用这个插件
u010373106的博客
05-22 299
Vue.js插件是一种增强Vue功能的方式，它允许你向Vue中添加全局功能，比如全局方法、指令、过滤器、混入等。
kubesphere_一文说清 KubeSphere 容器平台的价值
05-23
KubeSphere 是一个开源的 Kubernetes 容器平台，它提供了一系列的组件和工具，帮助用户更加方便地部署、管理和运行容器化应用，从而提高应用的可靠性和可扩展性。 以下是 KubeSphere 容器平台的价值： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值