vuex與vue的關(guān)系是什么呢？要想弄明白兩者之間的關(guān)系，首先就得兩者的概念需要搞明白，先來(lái)看看什么是vuex？

一、vuex的概念

Vuex 是為vue.js開(kāi)發(fā)提供的狀態(tài)管理工具。在一個(gè)項(xiàng)目開(kāi)發(fā)中頻繁的使用組件傳參的方式來(lái)同步data中的值，一旦項(xiàng)目變得很龐大，管理和維護(hù)這些值將是相當(dāng)棘手的工作。為此，Vue為這些被多個(gè)組件頻繁使用的值提供了一個(gè)統(tǒng)一管理的工具——VueX。在具有VueX的Vue項(xiàng)目中，我們只需要把這些值定義在VueX中，即可在整個(gè)Vue項(xiàng)目的組件中使用。

二、vuex的安裝與使用

1.使用npm安裝Vuex

npm i vuex -s

2. 在項(xiàng)目的根目錄下新增一個(gè)store文件夾，在該文件夾內(nèi)創(chuàng)建index.js; 目錄結(jié)構(gòu)如下：

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

3.初始化store文件夾下index.js內(nèi)容

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

//掛載Vuex
Vue.use(Vuex)

//創(chuàng)建VueX對(duì)象
const store = new Vuex.Store({
   state:{
       //存放的鍵值對(duì)就是所要管理的狀態(tài)
       name:'helloVueX'
   }
})

export default store

4.將store掛載到當(dāng)前項(xiàng)目的Vue實(shí)例當(dāng)中去（注：main.js文件中添加如下內(nèi)容）

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一樣，將我們創(chuàng)建的Vuex實(shí)例掛載到這個(gè)vue實(shí)例中
 render: h => h(App)
})

5.在組件中使用vuex

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

三、什么情況下使用 Vuex

    Vuex 可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架。這需要對(duì)短期和長(zhǎng)期效益進(jìn)行權(quán)衡。

    如果您不打算開(kāi)發(fā)大型單頁(yè)應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實(shí)是如此——如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex。一個(gè)簡(jiǎn)單的 store 模式就足夠您所需了。但是，如果您需要構(gòu)建一個(gè)中大型單頁(yè)應(yīng)用，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會(huì)成為自然而然的選擇。

四、vue與vuex的關(guān)系

    從上面的介紹不難看出，vue是一個(gè)前端框架，vuex只是vue的一個(gè)插件，官網(wǎng)說(shuō)vuex是狀態(tài)管理工具，其實(shí)說(shuō)白了，vuex就是一個(gè)存放多個(gè)組件共用的一個(gè)數(shù)據(jù)的存放、更改、處理的一個(gè)容器，就是說(shuō)來(lái)存放處理公共數(shù)據(jù)的工具，存放的數(shù)據(jù)一變，各個(gè)組件都會(huì)更新，也就是說(shuō)存放的數(shù)據(jù)是響應(yīng)式的。

這下是不是清楚了，其實(shí)說(shuō)白了就是vue是框架，vuex是插件。

相關(guān)推薦：VUE開(kāi)發(fā)移動(dòng)端網(wǎng)頁(yè)圖片預(yù)加載方案