使用前准备

如何在项目中添加vuex插件

1. npm i vuex
2. 在src开发路径中创建文件夹store(推荐使用)/ index.js

具体代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建保存公共数据的实例对象 Store 并导出
export default new Vuex.Store({})

3. 在入口文件min.js中注入Store实例对象

//导入Store实例
import Store from './store' //默认index.js路径可以省略
new Vue({
    Store
})

新项目

• 在创建vue-cli脚手架时直接选择vuex选项即可

vuex的概述

什么是vuex:

• vue的官方核心插件
• 集中式管理公共数据，且数据视图互响应 vuex的作用
• 较于父传子(props)、子传父($emit)、公共事件($on->$emit)这些通讯方式，拥有自己的树状结构内容的vuex显得更清晰，方便。

五个重要概念

一. state ***

作用

• 保存公共数据 语法
• 定义state对象

export default new Vuex.Store({
    state:{
    // 在任意组件中都可以访问
        属性:属性值
    }
})

• 使用state中的数据

//在模板中
$store.state.属性
// 在方法中
this.$store.state.属性

二. mutations ***

作用

• 修改公共数据 语法
• 定义mutations

mutations:{
// 此处的第一个参数是形参，不过默认会返回state对象为第一个参数值
// 只能有两个参数，第二个参数表示传入的值，可以传入复杂数据类型的值
    名字:function(state[,newVal]){
        // 修改的必须是state中已有的值
        state.属性 = newVal
    }
}

• 使用mutations

this.$store.commit('名字',newVal)

三. getters(类似于computed计算属性) **

作用

• 基于state公共数据生成新的值
• state的值变更，getters的值也会随着变更 语法
• 定义getters

getters:{
    名字(state){
        return 计算结果
    }
}

• 使用getters

this.$store.getters.名字

四. actions *

作用

• 处理异步请求 语法
• 定义actions

actions:{
    名字({commit},newVal){
        //发送异步请求
        ...
        // 想要保存数据，必须通过mutations 进行修改保存
        commit('mutations名字',请求结果)
    }
}

• 使用actions

this.$store.dispatch('名字'，newVal)

五. modules

作用

• 减少大项目时代码的冗余，让公共数据部分模块化，展示更清晰 语法
• 定义

modules:{
    modules1:{
    // namespaced属性值为真时，访问该模块的属性时需要加模块名--> 为假时正常访问
    // eg: this.$store.state.modules1.属性
    // eg: this.$store.commit('modules1/mutations名字',newVal)
    namespaced: true, 
    // 模块中也有单独的五个概念
        state:{},
        mutations:{},
        getters:{},
        actions:{},
        modules:{}
    }

}

总结

• vuex是一个单独的数据树，对公共数据进行操作时有一个固定的大概流程---> actions(异步请求) --> 调用mutations方法(保存数据) --> state绑定数据，可以进行数据渲染视图

拓展

map辅助工具

• 作用: vuex的数据使用时总是需要深度调用，map可以进行解构，简化使用方法

使用

                                                    ---加油学习！！！