vuex是配合vue一块儿使用的一个状态管理工具。
我通常使用它来保存一些全局的数据，例如用户登录信息，用户身份信息，总之一些在很多页面都会使用到的信息，都保存在vuex里面，用的时候就不需要再去请求接口了，直接去vuex里面拿就可以了。
先放官网地址
安装
npm install vuex --save
配置
我实在vue-cli环境中使用vuex的，所以这里就以这个环境作为项目文件结构来写配置了。
先在src/assets文件夹中新建一个vuex/store.js文件，建好之后在文件中写如下代码：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
name: 'xiaoming',
count: 1
}
})
export default store
在main.js中引入store.js:
import store from '@/assets/vuex/store';
在全局构造器中注册一下：（这里千万别忘了）
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store: store //在根实例下面注册store，相当于全局注册，可以全局调用
})
//题外话
//在vue-cli中，引入某些特定后缀的文件是不需要写全后缀的，就像上面这个store
//因为在config/webpack.base.conf.js文件中，有这样一段代码：
resolve: {
extensions: ['.js', '.vue', '.json'], //这些后缀的文件可以不写，可以自己随意添加
alias: { //模块别名定义，方便后续直接引用别名，无须多写长长的地址
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'), //从src文件夹开始寻找文件
}
}
到这里，vuex已经在你的项目中安装好并且可以使用了。你只需要在vue的html的部分写上如下代码：
<div>{{$store.state.name}}</div> //页面中会显示'xiaoming'
或者在构造器里面写:
console.log(this.$store.state.name); //打印'xiaoming'
html代码书写取值的时候可以不加this，script代码中必须加this。
使用
1.state状态对象的访问（我把state理解成vue构造器中的data）
state里面存放一些数据，例如用户姓名、性别、身份证号等等。之前我的访问方式是：
{{$store.state.name}}
但是上面这种写法太长了，而且看起来不直观，查阅过文档之后我发现，访问state对象可以有以下三种写法：
//如果我想在页面中只写{{name}}，可以这样写：
1. computed: {
name() {
return this.$store.state.name;
}
}
2. import {mapState} from 'vuex';
computed: mapState({
name: state => state.name //es6箭头函数
})
3. import {mapState} from 'vuex';
computed: mapState(['name']); //这种写法最简单，推荐
2.访问mutations方法（我把mutations理解成vue构造器中的methods）
先在store.js中写上如下代码：
const store = new Vuex.Store({
state: {
name: 'xiaoming',
count: 1
},
mutations: {
add(state,num) { //接收一个外部参数
state.count += num;
},
reduce(state) {
state.count --;
}
}
})
原先我调用add和reduce方法的时候，写法是：
<div>{{count}}</div>
<button @click="$store.commit('add',10)">点击加十</button>
<button @click="$store.commit('reduce')">点击减一</button>
但是这种调用方法的写法也太长，需要写上$store.commit这种东西，太啰嗦。
模仿访问state的方法，它也有另外一种便捷的写法：
import {mapState,mapMutations} from 'vuex';
methods: mapMutations(['add','reduce']),
//需要注意的是，state写在computed里面，而mutations写在methods里面，因为它是在@click之后的方法
现在你可以这样调用它：
<div>{{count}}</div>
<button @click="$store.commit('add',10)">点击加十</button>
<button @click="reduce">点击减一</button>
3.访问getters（我把getters理解成vue构造器中的computed）
getters就像一道门，每操作一次数据，都会经过一次它。
现在，在store.js中加入getters代码：
const store = new Vuex.Store({
state: {
name: 'xiaoming',
count: 1
},
mutations: {
add(state,num) { //接收一个外部参数
state.count += num;
},
reduce(state) {
state.count --;
}
},
getters: {
add100(state) {
return state.conut += 100; //每操作一次count，它都会加上100
},
changename(state) {
return state.name + 'c'; //每操作一次name，它都会拼接上一个c
}
}
})
怎么调用它呢？模仿state的调用方法。
因为它们都是对数据进行操作，不涉及方法，所以getters也写在computed中。
import {mapState,mapMutations,mapGetters} from 'vuex';
//现在来看computed的代码要怎么写
//在写state的时候，我们把computed中的代码写成了这样：
//computed: mapState(['name']);
//那如果现在再加入mapGetters，就需要改变computed的样子，具体应该这样写：
computed: {
...mapState(['name','count']), //es6扩展运算符，用map必须得用这个，否则会报错
...mapGetters(['add100','changename']),
count2: function() {
return this.$store.state.count;
}
}
此时，每当你操作一次button按钮，无论是加法还是减法，它都会对count进行+100的操作。当然，此时的name是不会改变的，即使你引入了changename方法，但因为没有改变过name，所以就不会出发changename方法。
4.访问actions
actions与getters的用法相似，但是它是异步调用，写在methods里面。（说实话我是没看懂这个actions有啥用）
先来完善一下我们的store.js中的代码：
const store = new Vuex.Store({
state: {
name: 'xiaoming',
count: 1
},
mutations: {
add(state,num) { //接收一个外部参数
state.count += num;
},
reduce(state) {
state.count --;
}
},
getters: {
add100(state) {
return state.conut += 100; //每操作一次count，它都会加上100
},
changename(state) {
return state.name + 'c'; //每操作一次name，它都会拼接上一个c
}
},
actions: {
add1(context) { //参数context即全局上下文对象，store
context.commit('add',10); //通过context调用add方法
setTimeout(()=>{context.commit('reduce')},3000)
},
reduce1({commit}) { //{commit}是另一种传参方式，一个封装好的commit
commit('reduce');
}
}
})
写好actions方法了之后，就来调用它，调用方法跟mutations差不多：
methods: {
...mapMutations(['add','reduce']),
...mapActions(['add1','reduce1'])，
aa(i) {
console.log(i)
}
}
在html代码中使用：
<button @click="add1">做加法</button> <button @click="reduce1">做减法</button>
reduce1方法调用了mutations中的reduce方法，每次点击减1；
add1调用了mutations中的add方法，每次点击加10，同时在3秒钟之后，会调用一次减法，减去1；
因为还有getters的设置，所以每次操作的时候还会再加100。
以上就是vuex的大致用法了，我平时只有state用的比较多。
我对vuex的理解很浅，如有不对的地方，请指正。