【Vue】vuex-五个核心

前言

🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭JS进阶
💨💨💨
💎接上一篇 Vue-条件,列表渲染-key的底层原理

vuex

vuex

1.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2.什么时候用Vuex

1. 多个组件依赖于同一状态.
2. 来自不同组件的行为需要变更同一状态.

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex
可能是繁琐冗余的。如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

3.搭建vuex环境

1. 安装:

npm install vuex@next --save

1. 创建文件: src/store/index.js

// 引入Vue核心库import Vue from'vue'// 引入Vueximport Vuex from'vuex'//应用Vuex插件
Vue.use(Vuex)//准备actions对象---响应组件中用户的动作const actions ={}//准备mutation对象---修改state中的数据const mutation ={}//准备state对象---保存具体的数据const state ={}// 创建并暴露storeexportdefaultnewVuex.store({
    actions,
    mutation,
    state
})

在

main.js

中创建vm时传入

store

配置项

......// 引入storeimport store from'./store'......//创建vmnewVue({
    el:'#app',
    render: h =>h(app),
    store
})

4.五个核心

基础使用:

1. 初始化数据, 配置 action, 配置 mutations , 操作文件 store.js

// 引入Vuex 核心库import Vue from'vue'// 引入Vueximport 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}//创建并暴露storeexportdefaultnewVuex.Store({
    actions,
    mutations,
    state
})

1. 组件中读取vuex中的数据: $store.state.sum

2. 组件中修改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

1. 概念: 当state中的数据需要经过加工后在使用时, 可以使用getters加工.
2. 在 store.js 中追加 getters 配置

......const getters ={bigSum(state){return state.sum *10}}//创建并暴露storeexportdefaultnewVuex.store({......
    getters
})

1. 组件中读取数据: $store.getters.bigSum

Modules

1. 目的: 让代码更好维护, 让多种数据分类更加明确.
2. 修改 store.js

const countAbout ={
    namespaced:true,
    actions:{.....},
    mutations:{.....},
    state:{......},
    getters:{...},}const personAbout ={
    namespaced:true,
    actions:{.....},
    mutations:{.....},
    state:{......},
    getters:{...},}const store =newVue.store({
     modules:{
           countAbout,
           personAbout
          }})

1. 开启命名空间后, 组件中读取state数据:

// 方式一: 自己直接读取this.$store.state.personAbout.list
// 方式二: 借助mapState读取...mapState('countAbout',['sum','school','subject'])

1. 开启命名空间后, 组件中读取getters数据:

// 方式一: 自己直接读取this.$store.getters['personAbout/firstPersonName']// 方式二: 借助mapGetters读取...mapGetters('countAbout',['bigSum'])

1. 开启命名空间后, 组件中调用dispath

// 方式一: 自己直接dispaththis.$store.dispath('personAbout/addPersonWang', person]// 方式二: 借助mapActions读取...mapActions('countAbout',{incrementOdd:'jiaOdd', incrementWait:'jiaWait'})

1. 开启命名空间后, 组件中调用commit

// 方式一: 自己直接committhis.$store.commit('personAbout/ADD_PERSON',person)// 方式二: 借助mapMutations读取...mapMutations('countAbout',{increment:'JIA', decrement:'JIAN'})

5.四个map方法的使用

1. 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']),}1. **mapActions方法:**用于帮助我们生成与 action 对话的方法, 即 : 包含 $store.dispath(xxx) 的函数methods:{//靠mapActions生成, incrementOdd, incrementWait (对象形式)...mapActions({incrementOdd:'jiaOdd', incrementWait:'jiaWait'}),//靠mapActions生成, incrementOdd, incrementWait (数组形式)...mapActions(['jiaOdd','jiaWait']),}1. mapMutations方法: 用于帮助我们生成与 mutations 对话的方法, 即: 包含 $store.commit(xxx) 的函数methods:{//靠mapMutations生成, increment, decrement (对象形式)...mapActions({increment:'JIA', decrement:'JIAN'}),//靠mapMutations生成, JIA,JIAN (数组形式)...mapActions(['JIA','JIAN']),}## 📢📢📢写在最后

• 看到这里有没有收获什么呢?🎀🎀🎀
• 🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的
• 觉的博主写的不错的,可以给个一键三连lia~✨✨