vuex 知识点总结

vuex 总结

1 vuex 概述

1.1 组件之间的共享数据的方式

  • 父向子传: v-bind属性绑定

  • 子向父 :v-on 事件绑定

  • 兄弟组件之间共享数据:eventbus

​ $on 接收数据的那个组件

​ $emit 发送数据的那个组件

总结 :小范围内的解决了组件数据共享

1.2 vuex 是什么

vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享

在这里插入图片描述

1.3 使用vuex 同意管理状态的好处

  • 能够在vuex忠集中管理共享数据,易于开发和维护

  • 能够高效果的实现组件的数据共享,提高开发效率

  • 存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步

1.4 数据适合存储到vuex中?

一般情况下。只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,

依旧存储在组件自己的data中。

2 vuex 基本的使用

2.1 安装vuex依赖包

npm install vuex --save

2.2 导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

2.3 创建store对象

const store = new Vuex.Store({
// state 中存放的就是全局共享的数据    
    state:{count: 0}
})

2.4 将 store 对象挂载到vue 实例中

new Vue{
    el:'#app',
    render: h => h(app),
    router,
    // 将创建的共享数据对象,挂载vue实例中国
        
    //所有的组件,就可以直接从store中获取全局的数据了
    store    
}

2.5 安装vue 环境(安装脚手架)

C:\Users\Administrator>nvm install 15.0.1
Downloading node.js version 15.0.1 (64-bit)...
Complete
Creating C:\Users\Administrator\AppData\Roaming\nvm\temp

Downloading npm version 7.0.3... Complete
Installing npm v7.0.3...

Installation complete. If you want to use this version, type

nvm use 15.0.1

C:\Users\Administrator>nvm list

    15.0.1
    10.20.0
  * 8.11.3 (Currently using 64-bit executable)

C:\Users\Administrator>nvm use 15.0.1
Now using node v15.0.1 (64-bit)

C:\Users\Administrator>npm install -g vue-cli
npm notice
npm notice New minor version of npm available! 7.0.3 -> 7.6.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.6.2
npm notice Run npm install -g npm@7.6.2 to update!
npm notice
[   ...............] / idealTree:pify: sill fetch manifest url-parse-lax@^1.0.0

2.6 小技巧

.prettierrc

{
  "semi":false ,//分号去除
  "singleQuote":true //双引号改为单引号
    
}

3 vuex 核心概念

3.1 核心概念概述

State

Mutation

Action

Getter

3.2 State

state 提供唯一的公共数据源,所有的共享的数据都要统一放到store的state中进行存储

const store = new Vuex.Store({
    state : { count: 0 }//全局唯一计数器
})
3.2.1 第一种方式
this.$store.state.全局数据名称

备注: 在template 模板中可以直接使用$store.state.全局数据名称
3.2.2 第二种方式
import {mapState} from 'vuex'

通过刚才导入的mapState函数,将组件需要全局的数据,映射为当前组件的computed计算属性

computed:{
    ...mapState(['count'])
}

3.3 Mutation

Mutation 用于变更store中的数据

只能通过mutation变更store中的数据,不可以直接操作store中的数据。

通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据变化。

3.3.1 方式一
// 备注:组件不能直接修改state的中的值,只有调用mutatioins中的方法,使用commit+ 函数名
//store文件:
mutations:{
    add(state) {
        state.count++
    }
}
// 调用方 使用该方法进行调用
this.$store.commit('add') 

//代参数
//store文件:
mutations:{
    add(state,step) {
        state.count+=step
    }
}
// 调用方 使用该方法进行调用
this.$store.commit('add',step) 

3.3.2 方式二
import {mapMutations } from 'vuex'

//通过刚才导入的mapmutations函数,将需要的函数mutations函数映射为当前组件的method方法
methods:{
    ...mapMutations(['add','addN'])
}


3.4 Action

action 用于处理异步任务

如果通过异步操作变更数据,必须通过action,而不能用mutations。但是在action中还是要通过触发mutation的方式间接变更数据。

3.4.1 方式一
const store = new Vuex.Store({
    //只有mutations 才能修改state中的数据
    mutations:{
        add(state ){
            state.count++
        }
        
    },
    actions:{
        //context 类似于上次文,可以提供commit方法
        addAsync(context){
            setTimeout(()=>{
                context.commit('add')
            },1000)
        }
    }
})



// 触发Action

methods:{
    handle(){
        // 触发actions的第一种方式
        this.$store.dispath('addAsync')
    }
}



带参数的action调用

const store = new Vuex.Store({
    //只有mutations 才能修改state中的数据
    mutations:{
        add(state ,step){
            state.count+=step
        }
        
    },
    actions:{
        //context 类似于上次文,可以提供commit方法
        addAsync(context,step){
            setTimeout(()=>{
                context.commit('add',step)
            },1000)
        }
    }
})



// 触发Action

methods:{
    handle(){
        // 触发actions的第一种方式
        this.$store.dispath('addAsync',step)
    }
}


3.4.2 方式二
import {mapActions} from 'vuex'

//通过刚才 指定的mapActions 函数,将需要的actions函数,映射到当前组件的methods方法
//... 展开运算符

methods:{
    ...mapActions(['addAsync','addNAsync']}





3.5 Getter

getter 对于store 中的数据进行加工处理后形成新的数据

  • getter 可以对store中已有的数据加工处理之后形成新的数据,类似vue的计算属性computed

  • store 中的数据发生变化,getter的数据也会跟着变化

getters:{
    
    showNum(state){
        return '当前最新值为'+state.count+'哈哈'
    }
    
}

3.5.1 使用getters的第一种方式:
 this.$store.getters.名称
3.5.2 第二种方式
import {mapGetters} from 'vuex'
computed:{
    ...mapGetters(['showNum']}


版权声明:本文为shi860715原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。