Vuex的基本概念与使用

Vuex的基本概念

概念

Vuex是一个Vue全家桶中的一员，是频繁且大型的数据共享的解决方案

优点

1.存储一步到位，不需要层层传递

2.数据流向清晰

3.响应式数据存储

Vuex的基本使用

1.下包

yarn add vuex

2.导包

import Vuex from 'vuex'
import Vue from 'vue'

3.挂包

Vue.use(Vuex)

4.实例化

const store = new Vuex.Store()

5.暴露对象

export default store

6.导入挂载

main.js 

import store from 'Vuex模块路径'

new Vue({
    store
})

Vuex的成员

State

State 是 Vuex 中的核心，用于存储数据，本质是一个对象

基本使用

声明

store/index.js

export default new Vuex.Store({
    State:{
        存储属性名：属性值
    }
})

实例：

export default new Vuex.Store({
    State:{
        count:1
    }
})

调用

this.$store.state.属性名

实例：

this.$store.state.count //1

辅助函数

辅助函数能够更方便更快捷的帮助开发者访问到 Vuex 中存储的数据，是一种映射结构，能够把 Store 中的数据映射到对应的 Vue 成员中

1.按需导入辅助函数

import { mapState } from 'vuex'

2.定义使用辅助函数

App.vue

export default {
    computed:{
        ...mapState(['被映射的属性名'])
    }
}

3.使用映射属性

this.属性名

或者

{{属性名}}

mapState 辅助函数能够将 State 中的数据映射到计算属性中，可直接通过 this.属性名或者属性名访问到

Mutations

在 Vue 中，禁止直接通过 this.$store.state.属性名修改属性值，因为 Devtools 无法捕捉到修改操作，也就是修改操作无法溯源，所以需要通过使用 Vuex 的 Mutations 来修改 State 中的数据

基本使用

声明

store/index.js

export default new Vuex.Store({
    mutataions:{
        方法名(state) {
            state 操作表达式
        }
    }
})

实例：

export default new Vuex.Store({
    mutations:{
        addCount(state) {
            state.count++
        }
    }
})

注意：mutations 中的方法第一个参数永远都是 state ，因为这个形参实际上就是 $store.state 对象，开发者需要通过这个对象来对 state 中的数据进行修改

调用

this.$store.commit('mutations方法名')

实例：

this.$store.commit('addCount')

载荷

载荷(payload)实际上就是 mutation 在调用过程中传递的参数，payload 只能存在一个，如果需要传入多个值，可以选择对象或者数组

传入载荷

this.$store.commit('mutation方法名',{ payload 参数 })

接收载荷

mutations:{
    mutations方法名(state,payload) {
        payload 就是传递过来的载荷
    }
}

辅助函数

mutations 的辅助函数 mapMutations 能够将方法映射到 methods 中，让开发者更快的调用到 mutations 中的方法

1.按需导入

import { mapMutations } from 'vuex'

2.定义使用辅助函数

App.vue

export default {
    methods:{
        ...mapMutations(['mutations方法名'])
    }
}

3.使用映射方法

this.mutations方法名({ payload参数 })

或者

<tamplate @click="mutations方法名"><tamplate>

mapMutations 方法调用传入参数为 mutations 方法的方法名，返回值是一个对象，直接使用 ... 展开运算符即可

Actions

由于 Mutations 中的方法对 State 中的数据进行修改必须是同步操作(异步 devTools 监听不到)，所以需要使用 Actions 来异步的获取或者调用 Mutations 来修改数据

基本使用

声明

store/index.js

export default new Vuex.Store({
    actions:{
        actions方法名(context) {
            异步代码块
        }
    }
})

实例：

export default new Vuex.Store({
    actions:{
        asyncAdd(context) {
            setTime(()=>{
                context.commit('mutation方法名')
            },3000)
        }
    }
})

注意：context 是 actions 方法的形参，存储的就是 $store 这个对象，所以可以通过 context 调用 commit 函数来使用 mutations 方法修改 state

使用

this.$store.dispatch('action方法名')

实例：

this.$store.dispatch('asyncAdd')

载荷

同 mutations 中的载荷，actions 中的载荷也同样是传参的作用

传入载荷

this.$store.dispatch('actions方法名',{ payload 载荷 })

接收载荷

actions:{
    actions方法名(context,payload) {
        payload 就是载荷参数
    }
}

辅助函数

和 mutations 成员类似，mapActions 方法也同样可以映射到 methods 中

1.按需导入

import { mapActions } from 'vuex'

2.声明使用

App.vue

export default{
    methods:{
        ...mapActions(['actions 方法名'])
    }
}

3.调用

this.actions方法名({ payload 载荷 })

或者

<tamplate @click="actions方法名"><tamplate>

Getters

getters 类似 state ，但是如果说 state 是 Vue 中的 data ，那么 getters 就是 computed 计算属性

只不过 getters 没有 setter ，只有 getter ,也就是只读，无法对其修改

基本使用

声明

store/index.js

export default {
    getters:{
        计算属性名(state) {
            第一个形参永远是 state 对象
            return 固有值
        }
    }
}

实例：

export default {
    getters:{
        total(state) {
            return state.count *= 10
        }
    }
}

调用

this.$store.getters.属性名

辅助函数

mapGetters 辅助函数能够将 getters 属性映射成为计算属性

1.按需导入

import { mapGetters } from 'vuex'

2.声明使用

export default {
    computed:{
        ...mapGetters(['getters属性名'])
    }
}

3.调用

this.getters 属性名

或者

{{ getters 属性名 }}

modules

modules 是 Vuex 中的模块化成员，能够通过 modules 成员将 Vuex 中的数据分割成为一个一个的数据模块。能够更好的管理数据，为大型项目必备操作

定义模块

store/模块名.js

export default {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

定义模块直接向外暴露一个 Vuex 配置对象

注册模块

store/index.js

1.导入模块

import 模块对象 from '模块路径'

2.注册模块

export default new Vuex.Store({
    modules:{
        模块名 : 模块对象
    }
})

注意：模块名不可以和模块中的方法和属性同名，会提示警告，并且注册的模块默认为全局模块

全局模块如果调用重名的方法和属性，会依次触发对应的属性和方法

调用全局模块方法

this.$store.commit('模块方法')

命名空间

命名空间 namespaced 能够将每个数据模块相互独立，分割开来，使其不再收到模块间重名的方法和属性的影响

开启命名空间

export default {
    namespaced:true
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}

只需在暴露对象的时候添加 namespaced:true 即可

命名空间的访问

state的访问

通过辅助函数访问

App.vue

按需导入辅助函数 mapState

import { mapState } from 'vuex'

使用辅助函数映射

export default {
    computed:{
        ...mapState('模块名称',['State数据'])
    }
}

调用

this.State属性名

mutations 的访问

直接访问

App.vue

this.$store.commit('模块名/mutations 方法名')

通过辅助函数访问

按需导入辅助函数

import { mapMutations } from 'vuex'

使用辅助函数映射

export default {
    methods:{
        ...mapMutations('模块名称',['mutations方法名'])
    }
}

调用

this.mutations方法名

或者 

@click="mutations方法名"

actions的访问

直接访问

App.vue

this.$store.dispatch('模块名/actions方法名')

通过辅助函数访问

按需导入辅助函数

import { mapActions } from 'vuex'

使用辅助函数映射

export default {
    methods:{
        ...mapActions('模块名'，['actions方法名'])
    }
}

调用

this.actions方法名

或者

@click="actions方法名"

getter 访问

通过辅助函数访问

按需导入

import { mapGetters } from 'vuex'

使用辅助函数映射

export default {
    computed:{
        ...mapGetters('模块名',['计算属性名'])
    }
}

调用

this.getters 计算属性名

或者

{{getters计算属性名}}

如果不知道如果访问命名空间下的数据模块，就请直接使用辅助函数吧(笑)