vuex的使用

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的理解很浅，若有不对的地方，请指正。