vuex与vue的关系与区别是什么？

vuex与vue的关系是什么呢？要想弄明白两者之间的关系，首先就得两者的概念需要搞明白，先来看看什么是vuex？

一、vuex的概念

Vuex 是为vue.js开发提供的状态管理工具。在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

二、vuex的安装与使用

1.使用npm安装Vuex

npm i vuex -s

2. 在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js; 目录结构如下：

│  App.vue
│  main.js
│
├─assets
│      logo.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
      index.js

3.初始化store文件夹下index.js内容

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

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
   state:{
       //存放的键值对就是所要管理的状态
       name:'helloVueX'
   }
})

export default store

4.将store挂载到当前项目的Vue实例当中去（注：main.js文件中添加如下内容）

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
 render: h => h(App)
})

5.在组件中使用vuex

<template>
   <div id='app'>
       name:
       <h1>{{ $store.state.name }}</h1>
   </div>
</template>

三、什么情况下使用 Vuex

    Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

    如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

四、vue与vuex的关系

    从上面的介绍不难看出，vue是一个前端框架，vuex只是vue的一个插件，官网说vuex是状态管理工具，其实说白了，vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器，就是说来存放处理公共数据的工具，存放的数据一变，各个组件都会更新，也就是说存放的数据是响应式的。

这下是不是清楚了，其实说白了就是vue是框架，vuex是插件。

相关推荐：VUE开发移动端网页图片预加载方案