vuex（1.0版本写法）

Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。

官方文档：http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到

每一个 Vuex 应用的核心就是 store（仓库）。"store" 基本上就是一个容器，它包含着你应用里大部分的状态(即 state). Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的. 当 Vue 组件从 store 中读取状态的时候, 若 store 中的状态发生变化，那么相应的组件也会相应地高效地得到更新.

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地分发状态变更事件(explicitly dispatching mutations)。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

二话不说，先来个简单的。本文先后步骤与官网不太一样

创建store

创建 Vuex store 的过程相当直截了当 - 只要提供一个初始化的 state 对象，以及一些 mutations：

vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)

//创建一个对象来保存应用启动时的初始状态
const state = {    
  serviceUrl:"http://192.168.20.166:8989/rest/",//接口地址,请求数据时使用
  city:{'city':'成都','id':'2'}//城市对象,本示例中有时候请求数据需要提供站点id 
}
// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
    // TODO: 放置我们的状态变更函数
}
// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default new Vuex.Store({
  state,
  mutations
})

创建action

创建一个新文件 vuex/actions.js

这地方我们先不写actions，暂时不需要。

获取值

创建一个新文件 vuex/actions.js

//这个getter函数会返回store.js里state中的值

export function getUrl (state) {
  return state.serviceUrl//返回serviceUrl的值
}

export function getCity (state) {
  return state.city//返回city对象
}

现在，我们在组件中加入这个getter 函数
拿vue-router中列表跳转详情的示例来做修改（http://www.cnblogs.com/jyichen/p/5660865.html）

<div class='box'>
    <div  class='know-list-box'>
        <ul>
            <li v-for="item in alllist">
                <a v-link="{ name: 'getReceiptDetail',params:{id: item.id }}">
                    <div class='fl know-info'>
                        <p class='font-normal nomal-height'>{{item.title | limit 30 }}</p>
                        <p class='co9a9a9a' ><span style='margin-right: 1rem;'>{{item.viewTimes}}K</span><span>{{item.publishTime | timer }}</span></p>
                    </div>
                    <div class='fr know-img'>
                        <img v-bind:src=item.coverImage />
                    </div>
                    <div class='clearfix'></div>
                </a>
            </li>
        </ul>
    </div>
</div>
<script>
import limit from '../fitter/limit.js'
//导入getter
import { getUrl,getCity } from '../vuex/getter.js'
export default{
    vuex: {
        getters: {
            // 注意在这里需要的是 `getUrl、getCity` 函数本身而不是它的执行结果 'getUrl(),getCity()'
            baseUrl:getUrl,
            city:getCity
        },
      },
      data(){
        return{
            toplist:[],
            alllist:[],
        }
    },
    route:{
        data({to}){
            return Promise.all([
                this.$http.get(this.baseUrl+'knowledge/list',{'websiteId':this.city.id,'pageSize':5,'pageNo':1,'isTop':1}),
                 this.$http.get(this.baseUrl+'knowledge/list',{'websiteId':this.city.id,'pageSize':20,'pageNo':1,'isTop':0}),
                ]).then(function(data){
                     return{
                        toplist:data[0].data.knowledgeList,
                        alllist:data[1].data.knowledgeList
                    }
            },function(error){
                //error
            })
        }
    },
    ready(){

    }
}
</script>

View Code