Vuex

Vuex

vuex 是一个专门为vue.js应用程序开发的状态管理模式。这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。
也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

安装

直接下载 / CDN 引用
https://unpkg.com/vuex
在 Vue 之后引入 vuex 会进行自动安装：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

NPM

npm install vuex --save

Yarn

yarn add vuex

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

vuex中，有默认的五种基本的对象：

state：

存储状态（变量）

getters：

对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()

mutations：

修改状态，并且是同步的。在组件中使用$store.commit(’’,params)。这个和我们组件中的自定义事件类似。

actions：

异步操作。在组件中使用是$store.dispath(’’)

modules：

store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

vuex的组成结构示意图

使用

在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。将其注入到Vue根实例中。

初始化store下index.js中的内容

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

//挂载Vuex
Vue.use(Vuex)

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

将store挂载到当前项目的Vue实例当中去

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

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

或者要在组件方法中使用

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

Action与Mutation的区别

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作，而Mutation只能且必须是同步操作。