IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vuex的相关知识 -> 正文阅读

[JavaScript知识库]Vuex的相关知识

「Vuex的相关知识」

? vuex是一种对vue 应用中多个组件的共享状态进行集中式的管理(读/写);

vuex的工作原理

https://segmentfault.com/a/1190000021717329

? vuex 核心概念和API:state、mutations、actions、getters、modules、向外暴露store对象

vuex

state

state
1) vuex 管理的状态对象
2) 它应该是唯一的
  const state = {
	xxx: initValue
}

mutations

mutations
1) 包含多个直接更新state 的方法(回调函数)的对象
2) 谁来触发: action 中的commit('mutation 名称')
3) 只能包含同步的代码, 不能写异步代码
	const mutations = {	
		yyy (state, {data1}) {
		// 更新state 的某个属性
		}
	}

actions

actions
1) 包含多个事件回调函数的对象
2) 通过执行: commit()来触发mutation 的调用, 间接更新state
3) 谁来触发: 组件中: $store.dispatch('action 名称', data1) // 'zzz'
4) 可以包含异步代码(定时器, ajax)
	const actions = {
		zzz ({commit, state}, data1) {
			commit('yyy', {data1})
		}
	}

getters

getters
1) 包含多个计算属性(get)的对象
2) 谁来读取: 组件中: $store.getters.xxx
	const getters = {
		mmm (state) {
		return ...
		}
	}
modules
1) 包含多个module
2) 一个module 是一个store 的配置对象
3) 与一个组件(包含有共享数据)对应

向外暴露store 对象

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

在组件中的使用:

import {mapState, mapGetters, mapActions} from 'vuex'
export default {
	computed: {
		...mapState(['xxx']),
		...mapGetters(['mmm']),
	}
	methods: mapActions(['zzz'])
}

{{xxx}} {{mmm}} @click="zzz(data)"
映射store
import store from './store'
new Vue({
	store
})

store 对象
1) 所有用vuex 管理的组件中都多了一个属性$store, 它就是一个store 对象
2) 属性:
	state: 注册的state 对象
	getters: 注册的getters 对象
3) 方法:
	dispatch(actionName, data): 分发调用action

? image-20210526142127906

mapMutations:

mapMutationsvuexmutation的辅助函数,用于在组件中映射mutation内的方法,以便在该组件中直接使用mutation里的方法

1.在组件中导入vuex中的mapMutations:

import { mapMutations } from ‘vuex‘

2.在组件中导入mutation里的方法名:

...mapMutations([   //使用es6的拓展运算符INCREASE_SHOPCART,DECREASE_SHOPCART]) 
//约定将mutation里的方法名为大写,并且导入时要给其加上引号

这一步,是将mutation里的函数映射到组件里,在组件里 :

this.INCREASE_SHOPCART === this.$store.commit(INCREASE_SHOPCART) //true

在有参数的情况下,mutation的state默认参数可以省略 :

this.INCREASE_SHOPCART(id) === this.$store.commit(INCREASE_SHOPCART,id) //true

举例说明:

// mutation-type.js
// 是否登录
export const SET_LOGINSTATU = 'SET_LOGINSTATU'

// 获取用户信息
export const SET_USERINFO = 'SET_USERINFO'
// mutatios.js
const mutations = {
  // 是否登录
  [types.SET_LOGINSTATU](state, loginStatu) {
    state.loginStatu = loginStatu
  },

  // 获取用户信息
  [types.SET_USERINFO](state, userInfo) {
    state.userInfo = userInfo
  },
import { mapMutations } from 'vuex'
this.setUserInfo(res.profile)
this.setLoginStatu(true)
...mapMutations({
  setUserInfo: 'SET_USERINFO',   // 相当于把 mutation里面的SET_USERINFO 映射成setUserInfo,使得能在该组件中用this.setUserInfo来调用SET_USERINFO
  setLoginStatu: 'SET_LOGINSTATU'
})

mapActions:

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

mapGetters:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

//如果你想将一个 getter 属性另取一个名字,使用对象形式:
...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

mapState:

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-12-25 10:59:18  更:2022-12-25 11:02:13 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/28 18:31:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码