vuex的简单介绍

											 # vuex

• 首先vuex是什么

1.Vuex是一个专为vue.js应用程序开发的状态管理模式 它采用集中式储存管理

vuex的由来

当一个项目在开发的时候频繁的使用组件传参的话，管理和维护起来就相当棘手，于是工程师们就开发出了一个可以吧组件中频繁使用的值统一管理的工具—————vuex

在说说如何安装vuex。

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

npm 安装 vuex

npm i vuex -s

在项目的src目录下新建一个store文件夹，在该文件内创建index.js
这个时候你的src文件夹是这个样子的

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

下载完以后我们在来简单使用一下

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

在把store挂载到当前项目的vue实例当中去

先打开mian.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)
})

在组件中使用Vuex
例如在App.vue中，我们要将state中定义的name拿来在h1标签中显示`

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

或者要在组件方法中使用

methods:{
    add(){
      console.log(this.$store.state.name)
    }
},

到这里就说明你的vuex能简单使用了

在说一下vuex的5大核心

• state 这里面是存放状态的地方
• mutations 这里可以操作state里面的状态
• getters 加工state成员给外界
• actions 异步操作
• modules 模块化状态管理

vuex的工作流程

首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。

如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。注意，1.3.3节中有提到，不建议在组件中直接对state中的成员进行操作，这是因为直接修改(例如：this.$store.state.name = ‘hello’)的话不能被VueDevtools所监控到。

最后被修改后的state成员会被渲染到组件的原位置当中