vue中的状态管理（全局变量）-vuex

vuex是一个状态管理插件，理解开来就是vue中的全局变量，非常轻量级，但是需要注意的是刷新以后就清除了，所以很多东西在vuex中还要注意在缓存中存储。

首先我们主要了解一个vuex的主要属性

 核心仓库是store（state,mutations,actions,getter,modules）。

action 提交mutation,而不是直接更改状态

action 可以包括异步操作，mutation只能同步

modules  将store分割成模块（modules）,每个模块拥有自己的(state,mutations,actions,getter);方便维护

store 改变状态时通过 （commit） mutations

getter 全局获取

mutations ：改变store中变量的唯一方法

废话不多说，我们来看看vuex的使用情况：

一：首先我们需要安装vuex

npm install vuex --save

二：我们需要在src目录下新建一个store文件夹，并且新建一个index.js的文件

import Vuefrom 'vue';

import Vuexfrom 'vuex';

import app from './modules/app';

import user from './modules/user';

import permission from './modules/permission';

import getters from './getters';

Vue.use(Vuex);

const store =new Vuex.Store({

    modules: {

    user

      },

    getters

    });

export default store

这里我们用引入模块的方式来进行数据操作。

同时我们在store文件夹中新建一个module的文件夹，并且新建一个user.js

在user中我们写一个获取token的方法

首先我们定义一下token

const user = {

    state: {

        token：‘’

    }

}

export default user;

然后我们写一个方法来赋值token，这个方法必须要写在mutations中

mutations: {

    SET_TOKEN: (state, token) => {

    state.token = token;

    }

}

我们写一个外部方法，可以让外部调用修改token

actions: {

    SaveToken({

        commit

        }, token) {

            commit('SET_TOKEN',token);

        }

}

在提交mutations修改store的时候可以用commit同步提交，也可以用dispatch异步提交

这样我们就把token保存在里store中

三：为了方便获取，我们来重写一个getters

在store文件夹中新建一个getters.js，将token写进去

const getters = {

token: state => state.user.token

};

export default getters

四：我们需要在main.js中引入vuex

import store from './store';

//实例化 store

new Vue({

  el: '#app',

  store,

  router,

  template: '',

  components: { App }

})

五：在页面中保存token

只需要在别的页面中调用

this.$store.dispatch('SaveToken',“token”).then((res) => {

}

res是如果有回调的数据，可以在vuex中

使用resolve回调，reject是报错回调。

六：保存好了，我们可以进行获取了

在页面中引入getter

import { mapGetters }from 'vuex';

在计算属性中

computed: {

    ...mapGetters([

       'token'

     ])

}

这样就相当于吧token注册到了data中了，可以随便用了