前言

🚩🚩🚩

💎个人主页: 阿选不出来

💨💨💨

💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.

💨💨💨

💎目前开发的专栏: JS 🍭Vue🍭JS进阶

💨💨💨

💎接上一篇 Vue-条件,列表渲染-key的底层原理

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]), }

📢📢📢写在最后

看到这里有没有收获什么呢?🎀🎀🎀

🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的

觉的博主写的不错的,可以给个一键三连lia~✨✨