vuex 配置使用解析 mutations响应式规则 Vue.delete/set 目录划分

最新推荐文章于 2022-08-14 17:20:50 发布
最新推荐文章于 2022-08-14 17:20:50 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/107474738
版权

文章目录

用处

vuex专门用于解决共享数据问题，是将数据提升到顶层，不过他使用了一些特别的技巧，不仅让组件的依赖更加清晰，当数据变动时，仅渲染依赖该数据的组件
注意：并非所有数据都需要用vuex管理，通常vuex只管理那些需要被组件共享的数据
在实际开发中，一些逻辑特别复杂的数据，尽管不共享，也可能提取到vuex中进行管理

解析

结构
import Vue from 'vue'
import VueX from 'vuex'

Vue.use(VueX)

const store = new VueX.Store({
    state:{  // 仓库  
		count:0
		// 访问 this.$store.state.count
    },
    mutations:{  // 状态更新 只能通过mutations的方法修改 仓库数据
    	// 修改仓库内容  浏览器场景devtoos 可检测到修改信息 
    	// 不能执行异操作 不然检测的修改记录不准确
        
        // 事件类型：回调函数
        
        // 修改仓库数据
        // state 仓库  payload 参数(负荷:携带着某某)
        setCount(state, payload){
        	state.count = payload
        }
        
        
        // 通过mutations 更新
        
        普通提交风格
        // this.$store.commit('setCount',2) 
        // payload => 2
        
        特殊提交风格
        // this.$store.commit({
		// 	type:'setCount',
		// 	count:2,
		// 	age:18
		// }) 
		// payload => {type:'setCount',count:2,age:18}
    },
    actions:{  // 执行异步操作的地方
    
		// 操作mutations方法
		// 当前store对象  context.commit-> this.$store.commit
		operationCount(context, payload){
			context.commit('setCount',2)
		}
		// 调用 operationCount 
		// this.$store.dispatch('operationCount')
    },
    getters:{ // 类似于计算属性
        // 访问   this.$store.getters.xxx
        
        // state 仓库 gettes 当前gettes对象 可用来访问其它gettes方法
        getFun(state, gettes){
			// gettes.xxx
		}
		// 传递参数 默认是不能传递参数的  可返回一个函数 调用该函数传参数
		getParams(state){
			return function(par){
				return par*state.count
			}
		}
		// 调用 $store.getters.getParams(99)
		
    },
    modules:{  // 多个仓库整合 仓库模块划分
    
    }
})
export default store
单一状态树 state

Vuex提出使用单一状态树
Single Source of Truth => 单一数据源
即全局只使用一个 store 对象

getters使用

仓库

const store = new VueX.Store({
    state:{  
		count:2
    },
    getters:{
		powCount(state){
            return state.count*state.count
        },
        isPow(state, gettes){
			return gettes.powCount > 10
		},
		// 给 getter 传参 返回一个函数 调用该函数传参数
		getParams(state){
			return function(par){
				return par*state.count
			}
		}
		// 简化
		getParams: state => par => par*state.count
		
	}
})

组件使用

<template>
	<div>
		获取count的平方：{{computedCount}}
		获取count的平方：{{$store.getters.powCount}}
		count的平方是否大于10：{{$store.getters.is20}}
		指定一个数乘以count {{$store.getters.getParams(99)}}
	</div>
</template>

<script>
export default{
	computed:{
		computedCount(){ // 直接获取然后计算
			return this.$store.state.count * this.$store.state.count 
		}
	}
}
</script>
mutations
mutations 提交风格

普通提交风格

// 触发
this.$store.commit('setCount',2) 

// 参数接收
mutations:{
	setCount(state, payload){
		//  payload => 2 
	}
}

特殊提交风格

// 触发
this.$store.commit({
	type:'setCount',
	count:2,
	age:18
}) 

// 参数接收
mutations:{
	setCount(state, payload){
		// payload => {type:'setCount',count:2,age:18}
	}
}
mutations 响应规则

Vuex中的store的state是响应式的，当state中的数据发生变化时，Vue组件会自动更新
这必须遵循一些Vuex对应的规则

  1. 提前在store中初始化好所需的属性（这些属性都会被加入响应式系统中，当属性发生变化时，会通知所有界面中用到该属性的地方，让界面发生刷新）
  2. 当给state中的对象添加新属性时，使用
    • 使用Vue.set(obj, 'newProp', 123)
    • 用新对象给旧对象赋值
  3. 当给state中的对象删除属性时
    • 使用Vue.delete(obj, 'prop')
state:{  
	obj:{
		name:"可响应的属性",
	}
},
mutations:{
	addNewProp(state){
		// 给state中的对象添加新属性
		// 直接添加是不可响应的
		state.obj['name2'] = '不可响应的属性'
		
		// 添加响应式属性 name3属性是可响应的
		Vue.set(state.obj, 'name3', '添加响应式属性')
		
		// 赋值一个新对象
		state.obj = {...state.obj, name3:'添加响应式属性'}
		
		// 删除属性 该方式删除不会响应
		delete state.obj.name
		
		// 删除响应式属性
		Vue.delete(state.obj, 'name')
	}
}
mutations 常量类型 名称使用常量

当项目增大时，Vuex管理的状态越来越多，需要更新的状态越来越多，那么意味着Mutations中的方法越来越多
方法过多，使用中需要花费大量的精力去记住这些方法，甚至是多个文件间来回切换，查看方法名称,甚至不是复制的时候，还会写错的情况。

mutations-types.js 保存方法名

export const INCREMENT = 'increment'
// 其它mutations类型
// ...

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import {INCREMENT} from './mutations-types'

Vue.use(Vuex)
export default new Vuex.Store({
	state:{
	
	},
	mutations:{
		[INCREMENT]:function(state, payload){
			// ...
		}
	}
})

使用

import {INCREMENT} from './store/mutations-types'
export default{
	methods:{
		setFun(){
			this.$store.commit(INCREMENT)
		}
	}
}
mutations 同步函数

通常情况下，Vuex要求muations中的方法必须是同步方法
主要原因是当我们使用devtools时，可以让devtools帮助捕捉mutations的提交信息
如果是异步操作，那么devtools将不能很好的追踪这个操作什么时候完成
如果有异步操作 使用actions的方法 来操作mutations

actions

action 类似于Mutation，但是用来代替Mutation来进行异步操作的

actions:{  // 执行异步操作的地方
    
	// 操作mutations方法
	// 当前store对象  context.commit-> this.$store.commit
	operationCount(context, payload){
		context.commit('setCount',payload)
	}
	// 不能直接操作state
	// context.state.xxx = xxx
	
	// 调用 operationCount 
	// this.$store.dispatch('operationCount', 2)
},
modules

Vue使用单一状态树，那么也就意味着有很多状态都会交给Vuex来管理
当应用变得非常复杂时，store对象就有可能变得非常臃肿，为了解决这个问题，Vuex允许将store分割成模块，而没个模块都有自己的 state mutations actions getters 等

基本使用

结构

modules:{
	a:{
		state:{},
		mutations:{},
		getters:{},
		actions:{},
		modules:{....}
	}
}

const moduleA = {
	state:{
		name:"moduleA"
	},
	mutations:{
		updataName(state, payload){
			console.log('moduleA -- mutations')
		}
	},
	getters:{
		// state 对应单前模块的getters
		// getters对应单前模块的getters
		// 在模块里面有第三个参数 rootState 获取根State
        repeatName(state, getters, rootState){
            return state.name.repeat(10)
        }
    },
     actions:{
        actRname(context, payload){
            // context.rootGetters
            // context.rootState
            console.log(context)
            setTimeout(() => {
                // 只能提交该模块的mutations方法
                context.commit('upName',payload)
            }, 3000);
        }
    }
}
const moduleB = {
	state:{},
	mutations:{},
	getters:{},
}

cons store = new Vuex({
	modules:{
		moduleA,
		moduleB
	}
})
// 相当于 
//state:{
//	moduleA:{...}
//}


// 调用
this.$store.state.moduleA.name
this.$store.commit('updataName')
{{$store.getters.repeatName}}
this.$store.dispatch('actRname')
命名空间 namespaced
const moduleA = {
	namespaced: true,
	mutations:{
		setisLoading(state, payload){
			//...
		}
	}
	//...
}

// 调用模块A下面的 mutations 的 setisLoading方法 
this.$store.commit('moduleA/setisLoading',true)

vuex使用

安装

npm i vuex

main.js配置

import vuex from 'vuex'
Vue.use(vuex )
const store = new vuex.Store({
	// 配置
	// state:{} //仓库
})
new Vue({
	render:h=>h(App)
	router,
	store
}).$mount("#app")

或者

import {Store} from 'vuex'
new Store({})
分离模块文件配置

新建 store/index.js

import Vue from 'vue'
import vuex from 'vuex'
import user from './user' // 导入用户信息仓库

Vue.use(vuex)
const store = new vuex.Store({
	// 配置
	modules:{
		// user（仓库名称）:user
		user, // 简写
		// ... 其他仓库
	}  
})
export default store

新建 store/user.js

// 用户信息仓库
export default {
	state:{
		user:{
			data:{}, // 用户信息
			isLogin:false // 登录状态
		}
	}
}

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

仓库结构
在这里插入图片描述
20200721205143871.png)

访问仓库数据
直接访问
this.$store.state.user.isLogin
通过计算属性
computed:{
	isLogin(){
		return this.$store.state.user.isLogin
	}
}
vuex辅助函数
import {mapState} from 'vuex'
computed:mapState('user',['data','isLogin'])

this.isLogin // false

访问多个 访问会以前面的为准

computed:{
	...mapState('user',['data','isLogin']),
	...mapState('user2',{
		user2data:'data',
		user2isLogin:'isLogin'
	}),
}
修改仓库数据 mutation

数据的改动必须要提交commit 一个mutation
在vuex中，提交mutation是数据变化的唯一原因
在 mutation 中不能出现副作用（不能改动或使用外部的数据，ajax,其他异步行为…）会影响vue监听工具的使用

mutations:{
	setData(state,data){
		/// setTimeout
	}
}

配置

// user
export default {
    namespaced:true, // 开启命名空间
    state:{
        data:[],
        isLoading:false
    },
    mutations:{
        // 这里配置多种变异方式
        // state:原来的状态
        // payload:负荷 
        setisLoading(state,payload){
            state.isLoading = payload
        },
        setData(state,data){
            state.data = data
        }
    }
}

调用

// 开启命名空间的写法
this.$store.commit('user/setisLoading',true)
// 没有开启命名空间的写法
this.$store.commit('setisLoading',true)
actions 业务逻辑处理
export default {
    namespaced:true, // 开启命名空间
    state:{
        data:[],
        isLoading:false
    },
    mutations:{
        setisLoading(state,payload){
            state.isLoading = payload
        },
        setData(state,data){
            state.data = data
        }
    },
    actions:{
    	// context 等同于 this.$store 只能传递一个参数payload
		async initData(context,params){
			// 由于是在当前命名空间 可不写 channels/
            context.commit('setisLoading',true);
            let dat = await getNewsChanges() //接口获取数据
            context.commit('setData',dat.data);
            context.commit('setisLoading',false);
		}
    }
}

调用 dispatch 触发action

this.$store.dispatch('channels/initData',1)

store 变化逻辑

直接通过mutation 改动仓库数据
在这里插入图片描述
通过action 改动仓库数据
在这里插入图片描述

在main.js 触发dispatch

// 初始化数据
store.dispatch('user/initData')

store 目录结构

在这里插入图片描述
actions.js

export default {
	asyncCount(context, payload){
		setTimeout(()=>{
			context.commit('addCount',payload)
		})
	}
}

getters.js

export default {
	count(state){
		return state.count > 10
	}
}

mutations.js

export default {
	addCount(state, payload){
		state.count = payload
	}
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actionsfrom from  './actions'
import getters from  './getters'
import moduleA from  './modules/moduleA'

const state = {
	count:0
}

Vue.use(Vuex)

export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters,
	modules:{
		moduleA
	}
})

modules/moduleA.js

export default {
	namespaced:true, // 开启命名空间
	state:{},
	mutations:{},
	actions:{},
	getters:{}
}
tianmeng1999
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex实现数据增加和删除功能
10-16
今天小编就为大家分享一篇Vuex实现数据增加和删除功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuex 对象嵌套属性的修改 mutations set 很方便的写法
solocao的专栏
12-13 4413
需求：一个对象 const state = { user: { verify: { state: 0 } } } 我需要使用类似this.set({ 'user.verify.state': 1 })这种写法直接获取或修改state[user.verify.state]的值。不知道别人怎么写的，我的写法如下： const mutations = { set...
vuex中mutations数据响应
weixin_30415801的博客
08-06 176
vuex中的mutation需遵守Vue的响应规则： 既然Vuex的store中的状态是响应式的，那么在我们变更状态时，监视状态的Vuex最好在state中初始化好所有的所需属性。 如果需要在对象上添加新属性，就跟vue中添加新属性是一样的道理，需要手动设置vue的监听， Vue.set(state.myProp,属性名，属性值); 转载于:https://www.cnbl...
vuex模块化组件,抛出组件命名规则?
weixin_46409887的博客
01-21 686
//引入vue 和vuex //所有的导入和导出都是基于vue来运行的 //vuex模块化 (//方法 state:{}, getters:{}, mutations:{}, actions:{} ) import Vue from "vue"; import Vuex from "vuex"; //引入名称 地址 import cat from "./modules/cat"; import dog from "./modules/do
Vuex(实现加减操作,Vue.set解决自定义属性没有双向数据绑定)
weixin_30298497的博客
05-13 1069
一、前言 二、主要内容 1、效果 2、分析： 1）点击按钮进行加减操作，肯定要注...
Vue.js中使用Vuex实现组件数据共享案例
10-15
Vuex是一个专为Vue.js设计的状态管理库，它提供了一种集中式的存储机制，使得多个组件能够安全地共享和修改状态。本篇文章将深入讲解如何在Vue.js中使用Vuex来实现组件之间的数据共享。 首先，安装Vuex。在Vue CLI ...
vue.js的状态管理vuex中store的使用详解
10-16
Vue.js的状态管理库Vuex提供了一种有序的方式来管理和共享组件之间的状态。Vuex的核心概念包括：State、Getter、Mutation、Action以及Module。 1. State State是Vuex中的核心，它代表应用的全局状态。所有组件都能...
详解Vue + Vuex 如何使用 vm.$nextTick
08-28
Vuex 中使用 vm.$nextTick 的详解 Vm.$nextTick 是 Vue.js 提供的一个异步回调方法，用于在下一个 DOM 更新循环之后执行代码。在本文中，我们将详细介绍如何在 Vue + Vuex 中使用 vm.$nextTick。 首先，我们需要...
在Vue-cli里应用Vuex的state和mutations方法
10-18
今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
168-Vue中vuex里面按照功能模块化最后一次拆分
jolinoy的博客
08-14 174
分别拆分成了四个文件：state.js getters.js mutations.js actions.js。这篇文章只是将下面的各个功能进一步拆分成各个文件：（这是拆分前的）168-Vue中vuex里面按照功能模块化最后一次拆分。
Vuex的拆分使用
m0_52364694的博客
10-12 496
当一个项目比较大时，组件中全局共享的状态的就会很多，从而导致state非常杂乱。解决这个问题的办法是拆分Vuex，将state、mutations、actions、getters拆分成单个js文件，使用时用import命令将各个模块导入。具体做法如下： 首先将state分离出去，state是数据仓库，可以新建一个state.js文件 文件内容如下： const state = { singer:{ name:'水木年华' } } export default state 然后拆分mutations
vue set用法
yangfeixiang001的博客
10-18 518
在vue项目中经常会遇到接口获取到值然后赋值以后页面数据没有发生变化得bug，这种情况中我们可以用到vue中得set方法，使页面视图进 行数据刷新，但是跟原始得刷新时不一样得，这个方法只是通知vue进行双向数据绑定得数据刷新，并不会进行页面得刷新。 使用方法，例： var data = { name:’‘小明’’ } this.$set(data,‘name’,’‘小芳’’) console.log(data) 打印得值为{name：‘小芳’} 这样赋值就可以让页面上得值进行刷新，可以解决掉当前得bug
vuex 的基本使用(三) Mutation的两种使用方式及携带参数
十二的博客
05-24 2117
Mutation用于变更store中的数据 1 只能通过mutation变更store数据 不可以直接操作store中的数据 2 通过这种方式虽然操作起来稍微繁琐一些 但是可以集中监听所有数据的变化 第一种方式 commit // 定义 Mutation const store = new Vuex.Store({ state: { count:0 }, mutations: { sub (state) { state.count--
新手Vuex入门之mutations第三篇
huanlesyaya的博客
12-04 198
通过第一篇跟第二篇,我们知道了如何去定义和获取store里面的状态数据，但是光会定义跟获取肯定是不够的，很多的场景需要对这些状态进行操作跟修改，那么具体如何操控呢？这就是本篇要讲的重点。重点来啦 1.只有mutation能修改跟设置state 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一...
Vuex状态管理(state,mutation,action,getter完全分离) X
admin12345671的博客
03-31 231
Vuex状态管理(state,mutation,action,getter完全分离) 一、安装依赖 npm install vuex --save 或者 yarn add vuex --save复制代码 二、基本配置文件事例 在项目中src文件夹下新建store文件夹,并在创建如下文件： index.js 入口文件 state.js 所有状态的管理 mutations.js mutation-types.js 存储相关mutation字符串常量 action.js 异步操作，修改，muta.
vuex实现模块化分割，在不同类别的文件中放置对应的数据及操作
gg0613的博客
06-29 455
目录结构为 store文件夹下有index.js 、modules文件夹，在modules文件夹下是你的模块，最好通过功能命名 一级目录：store 一级目录下文件：index.js 二级目录：modules 三级目录demo 三级目录下文件demo.js 三级目录下文件getter.js 三级目录下文件mutations.js 三级目录下文件 state,js 各文件的内容为 一级目录下index.js import Vue from 'vue' import Vuex from 'vuex' impo
Vue状态管理vuex之mutation
qq_40547061的博客
03-31 318
vuex流程 在绿色线框中，首先从API中拿数据，就会牵扯到异步操作，所以我们把异步操作定义在action中，在组件中触发一个action，action里面有一个ajax请求，去请求后端的一个接口，拿到数据以后我们只需要改变state中的状态就可以了，改变状态的唯一方式是commit提交一个mutation，提交以后state状态改变了，状态改变后视图就会改变因为Vuex是响应式的。 ...
typescript vuex_一起实现Vuex 无限层级类型推断。（TS 4.1 新特性）
weixin_39663360的博客
11-16 921
前言前几天，TypeScript 发布了一项 4.1 版本的新特性，字符串模板类型，还没有了解过的小伙伴可以先去这篇看一下：TypeScript 4.1 新特性：字符串模板类型，Vuex 终于有救了？。本文就利用这个特性，简单实现下 Vuex 在 modules 嵌套情况下的 dispatch 字符串类型推断，先看下效果，我们有这样结构的 store：const store = Vuex({ m...
vuex+映射
qq_67263268的博客
08-11 439
vuex+映射
vue2 vuex 根据路径对对象的增删改
最新发布
07-10
在Vue 2和Vuex中，可以使用Vue.set和Vue.delete来根据路径对对象进行增删改操作。以下是一个示例： 首先，在Vuex的mutations中定义相应的函数来处理对象的增删改操作： ```javascript // 在mutations中定义一个函数用于增加对象属性 addProperty(state, payload) { Vue.set(state.object, payload.path, payload.value); } // 在mutations中定义一个函数用于删除对象属性 deleteProperty(state, path) { Vue.delete(state.object, path); } // 在mutations中定义一个函数用于修改对象属性 updateProperty(state, payload) { Vue.set(state.object, payload.path, payload.value); } ``` 然后，在组件中可以通过调用this.$store.commit来触发对应的mutation函数，并传递相应的payload对象或路径作为参数： ```javascript // 增加对象属性 this.$store.commit('addProperty', { path: 'object.property', value: 'new value' }); // 删除对象属性 this.$store.commit('deleteProperty', 'object.property'); // 修改对象属性 this.$store.commit('updateProperty', { path: 'object.property', value: 'updated value' }); ``` 这样就可以根据路径对对象进行增删改操作了，使用Vue.set和Vue.delete方法可以确保响应式更新。记得在mutations中使用这两个方法来操作对象属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值