Vue.js --- Vuex 的安装与使用

目录

什么是 Vuex：

Vuex 的安装：

Vuex 的配置：

Vuex 的使用：

Vuex 的数据在组件中的使用：

Vuex 数据交互的简便写法：

Vuex 的模块化： 

欢迎指正！ 

---

什么是 Vuex：

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

如下图所示，我们可以在 State 中存储多个页面共享的数据，并将其渲染呈现到页面上，也就是 View 部分。同样地，我们可以在页面进行相应操作改变 State 中的数据并引起页面的响应式变化，即 Actions 部分。这些就是 Vuex 可以帮助我们完成的事情。

Vuex 的安装：

控制台输入：

//安装最新版本
npm i vuex

//安装老版本 以3版本为例
npm i vuex@3

值得注意的是，目前 Vuex 的最新版本为4版本且只适用于 Vue3 项目，若要将 Vuex 应用在 Vue2 项目中则需要安装老版本。

Vuex 的配置：

        1.在 src 目录下创建一个新文件夹 store ，在此文件夹下创建 index.js 文件，并进行以下相关配置。

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

const actions = {
    
}
const mutations = {
    
}
const state = {
    
}

const getters = {
    
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

        2.在 main.js 文件下引入 index.js 文件，并将其命名为 store ，使其称为 Vue 的配置项。这样就可以在 Vue 和 VueComponent 的实例化对象中找到 $store 这一配置项。

import store from './store/index'
const vm = new Vue({
    el: '#app',
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this;
    }
})

Vuex 的使用：

         上图展示了 Vuex 的工作路线，从组件出发，经过 Actions、Mutations、State 实现多组件共享数据