vuex的使用：

    1、src目录下面新建一个vuex的文件夹

    2、vuex 文件夹里面新建一个store.js

    3、安装vuex  
        cnpm install vuex --save

    4、在刚才创建的store.js引入vue  引入vuex 并且use vuex

        import Vue from 'vue'
        import Vuex from 'vuex'

        Vue.use(Vuex)

    5、定义数据
            /*1.state在vuex中用于存储数据*/
            var state={

                count:1
            }

    6、定义方法   mutations里面放的是方法，方法主要用于改变state里面的数据

        var mutations={

            incCount(){

            ++state.count;
            }
        }

    7、优点类似计算属性   ，  改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)
        var getters= {     
            computedCount: (state) => {
            return state.count*2
            }
        }
    8、 Action 基本没有用
        Action 类似于 mutation，不同在于：
        Action 提交的是 mutation，而不是直接变更状态。
        Action 可以包含任意异步操作。
        var actions= {
            incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/   
            context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/
            }
        }
    暴露
        const store = new Vuex.Store({
            state,
            mutations,
            getters,
            actions
        })
        export default store;

组建里面使用vuex：
        1.引入 store
             import store from '../vuex/store.js';
        2、注册
             export default{
                data(){
                    return {               
                       msg:'我是一个home组件',
                    value1: null,                
                    }
                },
                store,
                methods:{
                    incCount(){
                      
                    this.$store.commit('incCount');   /*触发 state里面的数据*/
                    }
                }
                }
        3、获取state里面的数据  
            this.$store.state.数据
        4、触发 mutations 改变 state里面的数据
            this.$store.commit('incCount');
        5、触发 actions里面的方法
            this.$store.dispatch('incCount');
        6、{{this.$store.getters.computedCount}}  获取 getters里面方法返回的的数据

示列代码如下

src/components/

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home" style="padding:20px;">    
       我是首页组件  -- {{this.$store.state.count}} ----{{this.$store.getters.computedCount}}          
        <button @click="incCount()">增加数量+</button>      
    </div>
</template>
<script>
    //1. 引入store   建议store的名字不要变
    import store from '../vuex/store.js';
    //2.注册
    export default{
        data(){
            return {               
                msg:'我是一个home组件',
                value1: null,             
            }
        },
        store,
        methods:{
            incCount(){
                //改变vuex store里面的数据

                //this.$store.commit('incCount');   /*触发 mutations 改变 state里面的数据*/

                this.$store.dispatch('incMutationsCount');   /*触发 actions里面的方法   */
            }
        }
    }

</script>
<style lang="scss" scoped>    
</style>

<template>    
    <div id="news">    
       我是新闻组件   --{{this.$store.state.count}}       
        <br>
        <button @click="incCount()">增加数量</button>
                <br><br>
                <br><br>
                <ul>
                    <li v-for="item in list">                    
                        {{item.title}}
                    </li>
                </ul>                        
    </div>
</template>
<script>
    //1. 引入store
    import store from '../vuex/store.js';
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件',
               list:[]             
            }
        },
        store,
        methods:{
            incCount(){
                this.$store.commit('incCount');
            },
            requestData(){
                  //请求数据
                    var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
                    this.$http.get(api).then((response)=>{
                        console.log(response);
                        //注意this指向
                        this.list=response.body.result;
                        //数据放在store里面
                        this.$store.commit('addList',response.body.result);
                    },function(err){
                            console.log(err);
                    })
            }
        },mounted(){
            //判断 store里面有没有数据
            var listData=this.$store.state.list;
            console.log(listData.length);
            if(listData.length>0){
                    this.list=listData;
            }else{
                 this.requestData();
            }
        }
    }
</script>

<style lang="scss" scoped>   
    .list{
        li{
            height:3.4rem;
            line-height:3.4rem;
            boder-bottom:1px solid #eee;
            font-size:1.6rem;
            a{
                color:#666;               
            }
        }
    }
</style>

<template>    
    <div id="news">    
       我是用户组件        
    </div>
</template>
<script>
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,                  
            }
        }       
    }

</script>
<style lang="scss" scoped>
</style>

src/router/router.js

import Vue from 'vue';

//配置路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import User from '../components/User.vue';

//2.配置路由   注意：名字

const routes = [
    { path: '/home', component: Home },
    { path: '/news', component: News, name: 'news' },
    { path: '/user', component: User },
    { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

//3.实例化VueRouter  注意：名字

const router = new VueRouter({
    mode: 'history',   /*hash模式改为history*/
    routes // （缩写）相当于 routes: routes
})
//5 <router-view></router-view> 放在 App.vue
export default router;

src/vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
/*1.state在vuex中用于存储数据*/
var state={
    count:1,
    list:[]
}

/*2.mutations里面放的是方法，方法主要用于改变state里面的数据
*/
var mutations={
    incCount(){
        ++state.count;
    },
    addList(state,data){

        state.list = data;
    }
}
/*3、优点类似计算属性   ，  改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)*/
var getters= {
   
    computedCount: (state) => {
        return state.count*2
    }
}

/*
4、 基本没有用

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
*/
var actions= {
    incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/
            
        context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/
    }
}

//vuex  实例化 Vuex.store   注意暴露
const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})
export default store;

App.vue

<template>
  <div id="app"> 
    <header class="header">
      <router-link to="/home">首页</router-link>
      <router-link to="/news">新闻</router-link>
       <router-link to="/user">用户</router-link>
    </header>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
   export default {     
      data () { 
        return {
         
         msg:'你好vue'
        }
      }
     
    }
</script>
<style lang="scss">
  .header{
    height:4.4rem;
    background:#000;
    color:#fff;
    line-height:4.4rem;
    text-align:center;
    a{
      color:#fff;
      padding:0 2rem
    }
  }
</style>

mian.js

import Vue from 'vue';
import App from './App.vue';

//引入公共的scss   注意：创建项目的时候必须用scss
import './assets/css/basic.scss';   
//请求数据

import VueResource from 'vue-resource';

Vue.use(VueResource);
//配置路由
import router from './router/router.js';

//4、挂载路由

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})