vue-cli项目全局使用和配置vuex

最新推荐文章于 2024-08-13 15:00:04 发布

jcat_李小黑

最新推荐文章于 2024-08-13 15:00:04 发布

阅读量2.2k

点赞数 3

分类专栏： Vue 文章标签： vue vuex 前端

本文链接：https://blog.csdn.net/weixin_43216105/article/details/88065159

版权

本文介绍了Vuex作为Vue.js应用的状态管理工具，如何在中大型项目中进行配置和使用。通过创建store目录，设置入口文件、模块、getter，以及在main.js中引入和组件中调用。文章详细讲解了Vuex的状态获取、mutation、action的使用，强调了状态变更的唯一途径是通过mutation，并提供了实例代码展示如何在组件中调用Vuex的getter和methods。

摘要由CSDN通过智能技术生成

vuex

前言
vuex是什么？
官网解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我的理解就是vuex是一个管理者，管理的方式是集中式管理，管理的对象即是vue.js应用程序中的众多组件的共享部分。
正文

vuex官方文档：https://vuex.vuejs.org/zh/ 具体知识介绍参照官网，此文主要介绍在中大型项目中，如何更好的配置并使用vuex。
安装依赖
- 首先用npm包管理工具，安装vuex
- 在src目录下新建store文件夹并配置
  –src
  ----store文件夹
  ------index.js–>vuex的入口文件
  ------getter.js–>vuex规范变量的文件
  ------models文件夹
  --------tabVuex.js–>主要tab模块代码实现文件
  --------newsVuex.js–>主要news模块代码实现文件
- 然后在main.js当中引入配置vuex
- 在使用的组件中调用

3.实现功能
兄弟组件之间的调用和改变—借鉴案例https://www.jianshu.com/p/d109e16d5f9a
全文共7章，（写的很全很容易理解）

4.详细代码如下

安装

1、cnpm install vuex --save

在store/index.js–>vuex的入口文件配置vuex

import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
import news from './modules/new'//引入tab模块代码
import tabVuex from './modules/tabvuex'//引入news模块代码
import getters from './getters'//规范变量的文件
Vue.use(Vuex); //使用 vuex

const store = new Vuex.Store({//创建vuex中的store对象
    getters,
    modules:{
        news,tabVuex
    }