Vuex

vuex是vue中专门为管理各种状态而产生的架构。有一些属性状态在多个vue组件中都要使用，如用户登录后的要记住登录名、角色等等，通常我们把这些属性记录在localStorage和sessionStorage中，而不是每次使用都重新向服务器请求数据。现在有了vuex可以更方便我们来管理这些共享属性。

基本使用方法
1.安装vuex，注意加 - -save，因为要在生产环境中使用。

npm install vuex --save

2.新建xx.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);//引入并使用vuex

3.创建状态对象state，并暴露state对象

const state={
    x:1
}

export default new Vuex.Store({
    state
})

4.在组件中使用状态

<template>
    <div>
        <p>{{$store.state.x}}</p><--使用状态值用插值的方法--!>
    </div>
</template>

<script>
    import store from '@/xx.js'//引入vuex的js文件
    export default{
        data(){
            return{
            }
        },
        store//暴露引入的.js
    }
</script>

以上就是最基本的使用方法，但当我们不想使用{{$store.state.x}}这种形式使用状态值时，想直接使用{{x}}这种形式，那么我们可以使用1.computed属性

computed:{
    x(){
        return this.$store.state.x;//注意这里使用this
    }
}

另外还有种最简便的方式，使用2.mapState,在组件中

import {mapState} from 'vuex';//引入mapState
computed:mapState(["x"])

待续…