Vuex的使用

 首先我们先搞清楚，Vue Vuex Vux 三者的区别，这一节主要讲Vuex的使用

vue 前端框架
链接：https://cn.vuejs.org/v2/guide/

vuex  状态管理模块（插件）

链接：https://vuex.vuejs.org/zh-cn/intro.html

vux  基于vue 和 we_ui开发的移动端UI组件库

链接：https://vuxjs.gitbooks.io/vux/content/ 

注意事项：

Vue 3 匹配的 Vuex 4 的文档， Vue 2 匹配的 Vuex 3 的文档（小伙伴们用vuex版本之前一定要先看自己的vue的版本）

由于的我的项目是vue2版本，这里先讲一下vue2.x中如何使用vuex（此处要使用vuex3呦）

废话不多说，先安装起来看看

安装

npm install vuex --save

提示：vuex4对应vue3的版本，vuex3对应vue2的版本，目前用的vue2，应使用如下命令安装

使用 

使用之前，我们先讲以下vuex到底是啥子

vuex是一个专门为vue.js提供状态管理的插件，他集中管理所有组件的状态。那就是vue中的data部分的数据处理、methods中方法对数据的处理，我们都可以放在vuex中管理起来，如果其他兄弟组件想要访问的话，是不是就不用重新访问数据，同时也不用通过父子组件传值来获取数据，界面上的代码就更简洁了，逻辑也更明确。

下面是官网一个例子，我们先分析一下，未使用vuex，页面之前是怎么操作的。

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

上面描述的是一个单项数据流，比较简单，可以不用vuex处理，但是如果多个组件数据共享时，会出现一些问题：

1、传参的方法对于多层组件来说，特别繁琐，无法处理兄弟组件之间的状态

2、我们经常用父子组件直接引用或者通过事件来变更和同步状态，这种模式非常脆弱，通常会导致无法维护的代码。

什么时候用vuex

当我们开发大型项目时，需要数据和组件数据共享，使用vuex，如果只是单个页面开发，单向数据流就可以满足业务需求，使用vuex会是项目更繁琐，此时就不必使用vuex（例如常见的组件开发）。

简单使用

1、在main.js中先引入，在引用

import Vue from 'vue';

2、在src目录下创建store目录，并在该目录下创建index.js,文件如下： 我们先创建一个store，内部包含一个初始state对象和一些mutation，创建后导出，外部可使用

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})
export default store;

现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

store.commit('increment')

console.log(store.state.count) // -> 1

 为了在vue组件中访问store的属性，我们必须给vue实例提供创建好的store，vuex提供了一个从根组件向所有子组件，以store选项的方式注入该store的机制。

import store from './store'
new Vue({
 el:"#app",
 store:store
})

现在我们可以从任意组件的方法提交一个变更：

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

 方法每执行一次，store.state.count 的值变化一次。

下一节我们将详细的介绍，state、Getters 、Mutations、Actions、Modules

也可参考Vuex使用（官网）