安装vuex

npm install vuex --save

捎带脚把element-ui也安装上了

npm install element --save

#引入vuex

然后再main.js中引入vuex和element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import Vuex from 'vuex'
Vue.use(ElementUI)
Vue.use(Vuex)

Vuex是什么？

Vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我们写个小的计数器

Hello.vue中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-button @click="increment">增加</el-button>
    <el-button type="primary">减少</el-button>
    <h1>{{ count }}</h1>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    //state
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        count: 0     
      }
    },
    //aactions
    methods: {
      increment () {
        this.count++
      }
    }
  }
</script>

这个计数器包含以下几个部分：

state, 驱动应用的数据源
view, 以生命方式将state映射到视图 (即模板template)
actions, 响应在view上的用户输入导致的状态变化

但是，当我们的应用遇到多个组件共享状态时，单项数据流的简洁性就很容易被破坏：

多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态

对于问题一，传参的方法对于多层嵌套的组件将会非常的繁琐，并且对于兄弟组件间的状态传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为。

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

开始

每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分状态（state）。Vuex和单纯的全局对象有以下两点不同：

Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变store中的状态。改变store总的状态的唯一途径就是显式地提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

简单的计数器

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

// make sure to call Vue.use(Vuex) if using a module system
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  	increment: state => state.count++,
    decrement: state => state.count--
  }
})
new Vue({
  el: '#app',
  computed: {
    count () {
	    return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
    	store.commit('decrement')
    }
  }
})

State

在Vue组件中获得Vuex状态

在store实例中读取状态最简单的方法就是在计算属性中返回某个状态，

项目结构

Vuex并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

应用层级的状态应该集中到单个store对象中。
提交mutation是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到action里面。

只要你遵守以上规则，如何组织代码随便。如果你的store文件太大，只需将action、mutation、和getters分割到单独的文件。

对于大型应用，我们会希望把Vuex相关代码分割到模块中。下面是结构实例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

本文结束，感谢阅读。

本文作者：melody0z
本文链接：https://melodyvoid/
欢迎转载，转载请注明文本链接