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']）
}