Vuevuex-五个核心
Posted 阿选不出来
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuevuex-五个核心相关的知识,希望对你有一定的参考价值。
前言
🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭JS进阶
💨💨💨
💎接上一篇 Vue-条件,列表渲染-key的底层原理
vuex
vuex
1.什么是vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
2.什么时候用Vuex
- 多个组件依赖于同一状态.
- 来自不同组件的行为需要变更同一状态.
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex
可能是繁琐冗余的。如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
3.搭建vuex环境
- 安装:
npm install vuex@next --save
- 创建文件:
src/store/index.js
// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象---响应组件中用户的动作
const actions =
//准备mutation对象---修改state中的数据
const mutation =
//准备state对象---保存具体的数据
const state =
// 创建并暴露store
export default new Vuex.store(
actions,
mutation,
state
)
在 main.js
中创建vm时传入 store
配置项
......
// 引入store
import store from './store'
......
//创建vm
new Vue(
el: '#app',
render: h => h(app),
store
)
4.五个核心
基础使用:
- 初始化数据, 配置
action
, 配置mutations
, 操作文件store.js
// 引入Vuex 核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引用Vuex
Vue.use(Vuex)
const actions =
//响应组件中的动作
jia(context, value)
context.commit('JIA',value)
,
jian(context, value)
context.commit('JIAN', value)
const mutations =
//执行加
JIA(state, value)
state.sum += value
// 初始化数据
const state =
sum:0
//创建并暴露store
export default new Vuex.Store(
actions,
mutations,
state
)
- 组件中读取vuex中的数据:
$store.state.sum
- 组件中修改vuex中的数据:
$store.dispatch('action中的方法名', 数据)
或$store.commit('mutation中的方法名', 数据)
备 注 : 若 没 有 网 络 请 求 或 其 他 业 务 逻 辑 , 组 件 中 也 可 以 越 过 a c t i o n s , 既 不 写 d i s p a t c h , 直 接 编 写 c o m m i t 备注: 若没有网络请求或其他业务逻辑, 组件中也可以越过actions, 既不写 dispatch, 直接编写commit 备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,既不写dispatch,直接编写commit
State
用于初始化数据,提供唯一的公共数据源,所有共享的数据统一放到store的state进行储存,相似与data
组件内通过 this.$store.state.count
访问到.
html内通过 $store.state.count
访问到.
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交
mutation
。
Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
mutations:
increment (state)
// 变更状态
state.count++
调用
在组件中使用:this.$store.commit('increment')
提交载荷 : this.$store.commit('increment',10)
你可以向 store.commit 传入额外的参数,即 mutation 的载荷(payload), 参数可以是字符串也可以是对象.
对象风格的提交方式:
this.$store.commit(
type: 'increment',
amount: 10
)
注意::: mutation 必须是同步函数
Action
Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。
使用-参数
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit
提交一个 mutation,或者通过 context.state
和 context.getters
来获取 state 和 getters。
调用
在组件内 : this.$store.dispatch('increment')
// 以载荷形式分发
this.$store.dispatch('incrementAsync',
amount: 10
)
// 以对象形式分发
this.$store.dispatch(
type: 'incrementAsync',
amount: 10
)
getters
- 概念: 当state中的数据需要经过加工后在使用时, 可以使用getters加工.
- 在
store.js
中追加getters
配置
......
const getters =
bigSum(state)
return state.sum * 10
//创建并暴露store
export default new Vuex.store(
......
getters
)
- 组件中读取数据:
$store.getters.bigSum
Modules
- 目的: 让代码更好维护, 让多种数据分类更加明确.
- 修改
store.js
const countAbout =
namespaced:true,
actions:.....,
mutations:.....,
state:......,
getters:...,
const personAbout =
namespaced:true,
actions:.....,
mutations:.....,
state:......,
getters:...,
const store = new Vue.store(
modules:
countAbout,
personAbout
)
- 开启命名空间后, 组件中读取state数据:
// 方式一: 自己直接读取
this.$store.state.personAbout.list
// 方式二: 借助mapState读取
...mapState('countAbout',['sum','school', 'subject'])
- 开启命名空间后, 组件中读取getters数据:
// 方式一: 自己直接读取
this.$store.getters['personAbout/firstPersonName']
// 方式二: 借助mapGetters读取
...mapGetters('countAbout',['bigSum'])
- 开启命名空间后, 组件中调用dispath
// 方式一: 自己直接dispath
this.$store.dispath('personAbout/addPersonWang', person]
// 方式二: 借助mapActions读取
...mapActions('countAbout',incrementOdd: 'jiaOdd', incrementWait: 'jiaWait')
- 开启命名空间后, 组件中调用commit
// 方式一: 自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
// 方式二: 借助mapMutations读取
...mapMutations('countAbout',increment: 'JIA', decrement: 'JIAN')
5.四个map方法的使用
-
mapState方法: 用于帮助我们映射
state
中的数据为计算属性.computed: //借助mapState生成计算属性, sum,school,subject (对象写法) ...mapState(sum:'sum', school:'school', subject:'subject') //借助mapState生成计算属性, sum,school,subject (数组写法) ...mapState(['sum','school','subject'])
2.**mapGetters方法:**用于帮助我们映射
getters
中的数据为计算属性.computed: //借助mapGetters生成计算属性, bigSum (对象写法) ...mapGetters(bigSum:'bigSum'), //借助mapGetters生成计算属性, bigSum (数组写法) ...mapGetters(['bigSum']),
- **mapActions方法:**用于帮助我们生成与
action
对话的方法, 即 : 包含$store.dispath(xxx)
的函数
methods: //靠mapActions生成, incrementOdd, incrementWait (对象形式) ...mapActions(incrementOdd:'jiaOdd', incrementWait:'jiaWait'), //靠mapActions生成, incrementOdd, incrementWait (数组形式) ...mapActions(['jiaOdd','jiaWait']),
- mapMutations方法: 用于帮助我们生成与
mutations
对话的方法, 即: 包含$store.commit(xxx)
的函数
methods: //靠mapMutations生成, increment, decrement (对象形式) ...mapActions(increment:'JIA', decrement:'JIAN'), //靠mapMutations生成, JIA,JIAN (数组形式) ...mapActions(['JIA','JIAN']),
📢📢📢写在最后
- **mapActions方法:**用于帮助我们生成与
-
看到这里有没有收获什么呢?🎀🎀🎀
-
🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的
-
觉的博主写的不错的,可以给个一键三连lia~✨✨
以上是关于Vuevuex-五个核心的主要内容,如果未能解决你的问题,请参考以下文章
拉伸蠕变实验-高分子材料性能测试-高分子材料加工工程专业实验教程
R语言plotly可视化:使用PCA算法进行数据降维使用plotly可视化PCA所有的主成分绘制散点图矩阵降维后的两个(三个)核心主成分的二维三维可视化图形方差解释的量载荷图等