vue vuex 挂载_VueX（Vue状态管理模式)

一、初识VueX

1.1 关于VueX

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

1.2 安装

由于VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.x构建的目录。

以下步骤的前提是你已经完成了Vue项目构建，并且已转至该项目的文件目录下。

Npm安装Vuex

npm i vuex -s

在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js

此时你的项目的src文件夹应当是这样的

│ App.vue

│ main.js

│

├─assets

│ logo.png

│

├─components

│ HelloWorld.vue

│

├─router

│ index.js

│

└─store

index.js

1.3 使用

1.3.1 初始化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

1.3.2 将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实例中