第十一节：Vuex

最新推荐文章于 2024-07-19 10:52:30 发布
最新推荐文章于 2024-07-19 10:52:30 发布
阅读量112 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43220836/article/details/126664862
版权

第十一节：Vuex

文章目录

1、了解vuex

​ 了解vuex之前先思考一下vue-router进行加载的组件，他们既不是父子组件，也不是非父子组件，而是毫无关联的组件。那么他们之间要如何通讯呢？？？
在这里插入图片描述

简单的方式就是创建一个组件之间都可以访问的公共仓库，这个仓库其实就是一个对象。这个对象包含变量，函数等参数。
在这里插入图片描述

store 模式：

  • 创建一个仓库。
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 	count:0
 },
 getters: {
 },
 mutations: {
 },
 actions: {
 },
 modules: {
 }
})
  • 组件中读取仓库中的数据
<!-- getstore.vue -->
<template>
	<div>{{ count }}</div>
</template>
<script>
   // 引入仓库对象
   import store from 'store.js';
   export default {
       data(){
           return {
               count:store.count // 将仓库中的数据赋值给本地数据
           }
       }
   }
</script>
  • 组件中修改仓库中的数据
<!-- setstore.vue -->
<template>
	<button @click="add">++</button>
</template>
<script>
   // 引入仓库对象
   import store from 'store.js';
   export default {
       methods:{
           add(){
               store.count++;// 直接对仓库中的数据进行修改
           }
       }
   }
</script>

​ 这样的方式简单便捷，适用于小型项目。但是想在中大型项目中，设置到的数据非常多，这样做可能会变得很麻烦。所以更好的在管理这些数据的的时候，vuex应运而生！

2、安装配置

  • npm 安装指令：npm install --save vuex

  • 插件配置

  • 为了便于管理，在src下单独新建一个vuex的文件夹，以及index.js的文件，所有公用的配置写在index.js中 然后再main.js中引用。

  • vuex基本配置

    // src/vuex/index.js
import Vue from 'vue';
import Vuex from 'vuex';

// 注册插件
Vue.use(Vuex);

// 定义状态仓库
const state = {
	count:0 // 一条状态
}

// 定义状态方法,用于操作状态仓库中的数据
const mutations = {
	add(state){
		state.count++;// 自增
	},
	reduce(state){
		state.count++;// 自减
	}
}

// 实例化store对象
export default new Vuex.Store({
	state,
	mutations
});

  • 在 main.js 中导入store对象

    // main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
// 导入store对象
import store from './vuex';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router,
  store// 注册
})

3、使用Vuex

  • 基本使用（state，mutations）

  • 获取状态：从仓库中取出数据

  • 语法：

    这时候在任意的子组件中通过 this.$store.state.* 就能获取存储在仓库中的数据

  • 案例：

    // Home.veu

<template>
  <div>
	 <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  compount:{
      count(){
          // 获取数据存储到本地属性的时候不能直接赋值，需要使用计算属性来检测数据变化
          return this.$store.state.count;
      }
  }
}
</script>

  • 修改数据：当需要对数据进行更新的时候，必须通过 this.$store.commit(mutationName[ ,args...]) 调用mutations里面定义方法的方式，而不是对数据进行直接的修改。这样式为了能够跟踪到数据的变化。

// Home.veu

<template>
  <div>
   <button @click="$store.commit('add')">+</button>
   <button @click="$store.commit('reduce')">-</button>
	 <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // count:this.$store.state.count
    }
  },
  computed:{
    count(){
      return this.$store.state.count;
    }
  }
}
</script>
  • 这时候在任意组件中使用仓库中的数据的时候，都会同步发生改变。
// User.vue
<template>
  <div>
	<p>{{$store.state.count}}</p>
  </div>
</template>
  • commit 方法能够传递参数，可以在配置文件的 mutations 配置的方法中接收。但是需要注意的是，mutations 配置的方法中，第一个参数为 state 对象，正真的参数需要从第二参数器开始获取。
// Home.veu
<template>
  <div>
   <button @click="$store.commit('add')">+</button>
   <button @click="$store.commit('reduce')">-</button>
   <!-- 传递参数 -->
   <input type="text" @change="$store.commit('input',$event.target.value)" />
   <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  computed:{
    count(){
      return this.$store.state.count;
    }
  }
}
</script>

vuex/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
	count:0
}

const mutations = {
	add(state){
		state.count++;
	},
	reduce(state){
		state.count--;
	},
	input(state,val){
		console.log(state);// state 对象
		state.count = val;// 获取到的参数
	}
}

export default new Vuex.Store({
	state,
	mutations
});

  • mapState：当需要导入多个状态属性到本地的时候重复的去写计算器属性非常麻烦，所以vuex提供了一个 mapState 的辅助方法

  • 在需要使用的组件中导入 mapState 方法

  • 使用 mapState 方法，该方法返回一个对象，参数传入一个对象，或者一个数组。对象的属性为需要注册的属性。

    // Home.veu

<template>
  <div>
   <button @click="$store.commit('add')">+</button>
   <button @click="$store.commit('reduce')">-</button>
   <p>{{count}}</p>
  </div>
</template>

<script>
import {mapState} from 'vuex';// 1. 导入
export default {
  // 2. 传递一个对象值
  computed:mapState({
  	count:store=>store.count,// 设置函数为值，函数的第一个参数为store对象
  	count:'count',			// 设置字符串，为 store=>store.count 的简写格式
    count:function(){
    	console.log(this);   // 函数内部的this指向组件实例对象      
    }
  })
  // 2. 传递一个数组
  computed:mapState(['count']) // 等同于 count:this.state.count
}
</script>

  • 当计算属性中需要注册其他非 store 中的数据时，需要把 mapState 返回的对象进行合并，返回一个新的对象.

    • Object.assign() ：合并参数中的对象，返回一个新的对象

      // Home.veu

<template>
  <div>
   <button @click="$store.commit('add')">+</button>
   <button @click="$store.commit('reduce')">-</button>
   <p>{{ count }}</p>
   <p>{{ x }}</p>
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  computed:Object.assign(
      // 本地对象
      {
          x(){return 'xxxxx'}
      },
      // store对象
      mapState({
        count:'count'
      })
  )
}
</script>
      • ...：es6展开运算符
      export default {
  computed: {
      x(){return 'xxxxx'},
      // store对象 将store对象展开添加到父对象中
      ...mapState({
        count:'count'
      })
   }
}

  • getter、action：vuex中另外的两个核心概念。

  • getters：vuex中的计算器属性

    getter可以和计算器属性一样监听 state 的中的某个属性然后同步的计算更新返回新的计算后数据
// vuex/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
	count:0,
}
const mutations = {
	add(state){
		state.count++;
	},
	reduce(state){
		state.count--;
	}
}
// getter 对象
const getters = {
	doubleCount(state){
		return state.count * 2;// 将 count 的值*2
	}
}

export default new Vuex.Store({
	state,
	mutations,
	getters// 注册getter
});

  • 通过 store.getters.* 获取getter的数据

    // Home.veu
<template>
  <div>
   <button @click="$store.commit('add')">+</button>
   <button @click="$store.commit('reduce')">-</button>
   <p>{{count}}</p>
   <!-- 获得 count乘2 的数值 -->
   <p>{{dobuleCount}}</p>
  </div>
</template>

<script>
export default {
  computed:{
    count(){
      return this.$store.state.count;
    },
    doubleCount(){
      return this.$store.getters.count;// 获取getter数据          
    }
  }
}
</script>

  • action：action和mutation类似，优点在于可以执行异步操作（mutation里是不能执行异步操作的）。使用的方式和 mutation 基本一致但是，最大的不同点在于，更新数据是在 action 注册的函数里面调用commit来实现的

    // vuex/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
	count:0,
}
const mutations = {
	add(){
		state.count++;
	},
	reduce(){
		state.count--;
	}
}
const getters = {
	dobuleCount(){
		return state.count * 2;
	}
}

// action对象
const actions = {
	asyncAdd(context){
		setTimeout(()=>{
			context.commit('add');// 
		},1000)
	}
}

export default new Vuex.Store({
	state,
	mutations,
	getters,
    actions // 注册action
});

  • 通过 store.dispatch() 触发

    // Home.veu

<template>
  <div>
   <button @click="$store.commit('add')">+</button>
   <button @click="$store.commit('reduce')">-</button>
   <!-- 触发action 1s 后更新数据 -->
   <button @click="$store.dispatch('asyncAdd')">+(async)</button>      
   <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  computed:{
    count(){
      return this.$store.state.count;
    }
  }
}
</script>

4、vuex模块系统

如果使用单一的状态对象，当应用比较庞大的时候，会变得非常臃肿难以维护。所以当很多模块需要进行维护的时候，可以将store划分为单独的子模块，子模块中还可以继续包含子模块

4.1、基础模块

案例：

// 定位模块
// vuex/index.js

// 子模块 a
const moduleA = {
    state:{count:0},
    mutations:{
        add(state){
            state.count ++;
        }
    },
    getters:{
        doubleCount(state){
            return state.count * 2;
        }
    },
    actions:{
        asyncAdd(context){
            setTimeout(()=>{
                context.commit('add');
            },1000);
        }
    },
    modules:{
        childA:{// 子模块 a 的子模块
            state:{
                str:'hello'
            }
        }
    }
}

// 子模块 b
const moduleB = {
    state:{count:10},
    mutations:{
        add(state){
            state.count ++;
        }
    },
    getters:{
        doubleCountB(state){
            return state.count * 2;
        }
    },
    actions:{
        asyncAdd(context){
            setTimeout(()=>{
                context.commit('add');
            },1000);
        }
    }
}

export default new Vuex.Store({
	modules:{// 注册子模块
		moduleA,
		moduleB
	}
});

  • 读取state

    <template>
  <div id="app">
  	<p>a-count---{{ $store.state.moduleA.count }}</p>
  	<p>b-count---{{ $store.state.moduleB.count }}</p>
  </div>
</template>

  • 读取getter：读取getter的时候需要注意，目前的情况下和非模块的方式一样的去读取就可以了，当有不同模块中出现相同的getter的时候则会报错来保证唯一性。

    <template>
  <div id="app">
  	<p>a-doubleCount---{{ $store.getter.doubleCount }}</p>
  	<p>b-doubleCount---{{ $store.getter.doubleCountB }}</p>
  </div>
</template>

  • 触发mutation和action：同样，目前情况下，触发方式和非模块方式一致。且触发所有同名mutation或action

    <button @click="$store.commit('add')">+</button>
<button @click="$store.dispatch('asyncAdd')">+(async)</button>
4.2、命名空间

​ 以上的方式感觉混乱，完全没有模块的概念。模块之间是否能够单独的触发mutation action？ 单独的获取设置 getter 又不会产生冲突？！这时候我们只需要打开一个开关，在模块中添加一个属性 namespaced:true 这时候，模块就是一个单独的空间。

  • 模块设置
// vuex/index.js

// 子模块 a
const moduleA = {
    namespaced:true,// 设置为单独的命名空间
    state:{count:0},
    mutations:{
        add(state){
            state.count ++;
        }
    },
    getters:{
        doubleCount(state){
            return state.count * 2;
        }
    },
    actions:{
        asyncAdd(context){
            setTimeout(()=>{
                context.commit('add');
            },1000);
        }
    },
    modules:{
        childA:{// 子模块 a 的子模块
            state:{
                str:'hello'
            }
        }
    }
}

// 子模块 b
const moduleB = {
    namespaced:true,// 设置为单独的命名空间
    state:{count:10},
    mutations:{
        add(state){
            state.count ++;
        }
    },
    getters:{
        doubleCountB(state){
            return state.count * 2;
        }
    },
    actions:{
        asyncAdd(context){
            setTimeout(()=>{
                context.commit('add');
            },1000);
        }
    }
}

export default new Vuex.Store({
	modules:{// 注册子模块
		moduleA,
		moduleB
	}
});

  • 读取getter：这时候读取getter基本方式不变，但是属性名要带上模块前缀

    <template>
  <div id="app">
  	<p>a-doubleCount---{{ $store.getter['moduleA/doubleCount'] }}</p>
  	<p>b-doubleCount---{{ $store.getter['moduleB/doubleCount'] }}</p>
  </div>
</template

  • 触发mutation和action：同样带上模块前缀

    <button @click="$store.commit('moduleA/add')">+</button>
<button @click="$store.dispatch('moduleB/asyncAdd')">+(async)</button>

    ​

小戈&328
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
第十六节 vuex、cookie的使用
01-15 130
Vuex 是一个 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的主要用途是集中存储管理应用的所有组件的状态，并通过定义好的规则保证状态以一种可预测的方式发生变化。这样有助于我们更方便地管理、跟踪和调试状态的变化，从而提高了代码的可维护性和可测试性。管理全局状态：在多组件的复杂应用中，你可以通过 Vuex 统一管理全局状态，例如用户认证、窗口大小、动态主题等。
vuex-electron：Vuex和电子的集成
02-04
Vuex电子 在所有流程（包括主流程）之间共享Vuex Store的最简单方法。 产品特点 :star: 持续状态 :star: 共有突变 要求 v2.0 + v2.0 + v2.0 + 安装 安装Vuex Electron easy的方法为1-2-3。 使用或安装软件包：...
vue进阶：vuex（数据池）
weixin_30949361的博客
07-27 72
非父子组件传值 vuex 一、非父子组件传值 基于父子组件通信与传值实现非父子组件传值的示例关键代码： 1 <template> 2 <div> 3 <!-- 学员展示 --> 4 <add-student @add="add"></add-stud...
Vue2 第十九节 Vuex （一）
星星之火的语言c学习
08-04 201
Vuex
Vue2 第十九节 Vuex（二）
星星之火的语言c学习
08-04 117
Vuex
vuex:vuex原始解析-源码解析
03-24
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则确保状态以一种可预测的方式发生变化。在这个“vuex:vuex原始解析-源码解析”的主题中，我们将深入...
vuex-demo：Vuex演示
02-14
Vuex-Demo 从获取一个笑话列出API调用中的所有笑话将所有笑话存储在本地存储中，因此即使刷新页面后日期也将持续存在删除按钮从本地存储中删除数据项目设置npm install编译和热重装以进行开发npm run serve编译并...
react-vuex:Vuex的React绑定，react-redux样式
04-28
安装react-vuex需要React 16.0 + ， Vue 2.0+和Vuex 3.0+ npm install --save react-vuex假设您正在将软件包管理器与或类的模块捆绑器一起使用，以使用。文献资料要查看一些示例项目，请查看此存储库的“部分。...
vuex:vuex知识总结
03-27
威克斯项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build运行测试npm run test整理和修复文件npm run lint自定义配置请参阅。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 724
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 409
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1229
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
element-plus的el-table自定义表头筛选查询
i_am_a_div的博客
07-17 404
element-plus的el-table自定义表头筛选查询
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 1095
nodejs、vue、SSH服务、SSH免密登录
【Vue】`v-on` 指令详解：事件绑定与处理的全面指南
最新发布
lph159的博客
07-19 267
v-on是 Vue.js 用于事件监听的指令，可以绑定原生 DOM 事件或自定义事件。其基本语法如下：
vue、js截取视频任意一帧图片
weixin_43728978的博客
07-17 912
vue、js对video视频中的某一帧截取，截取视频封面
我在vue2重生之vite加强版
许发君博客
07-17 390
需要引入相关插件进行自动引入。
Vue3获取路由参数、包含获取路径参数
weixin_46607967的博客
07-17 246
该demo使用了重定向 把123和456 分别设置为id和name 通过路由传参 传递给重定向后的 url 路由。这里业务逻辑为 跳转到url页面 同时接收到123和456参数。如实际项目不需要 则按需修改 一条路由也可实现。route为路由信息 query为获取的路由参数。如果是通过url传参 可直接在组件内使用。在 url 页面中正常获取路由参数即可。如果参数直接在路径中 可参考。中对 url路由 进行修改。该条路由表信息使用了。
Vue.js与Flux架构：Vuex概念实战指南
《Vuex概念：Flux应用架构在Vue.js中的实践》是一本由Daniel Schmitz和Daniel Pedrinha Georgii编著的英文电子书，它于2016年7月8日发布，通过Leanpub平台销售。这本书主要讲解了如何将Vuex，一个专为Vue.js设计的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小戈&328

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值