在其他页面使用和修改全局数据

    我们再创建第二个页面 - 城市选择页，将这个页面命名为 city-selector.html。在这个页面里，我们会使用到在首页定义的全局数据 ，以及通过在组件中写 JS 代码来修改全局数据 city。

    同样地，下面我们仅展示数据相关的页面代码作为参考：

    在 city-selector.html 中，我们通过 mip-data 标签仅定义了当前页面的标题数据 title，并没有定义 city。这是因为 city 在首页已经作为全局数据定义过了，从首页跳转到城市选择页后，该数据可以直接使用。

    从 HTML 的代码还可以看到，我们使用了一个叫 mip-city-list 的自定义组件，这是为了方便展示和操作城市列表，开发者可以参考以下代码创建组件，并把编译后的组件代码文件链接到 city-selector.html 中。

    1. <template>
    2.   <div class="mip-city-list-wrapper">
    3.     <p class="sub-header">城市列表：</p>
    4.     <ul>
    5.       <li 
    6.         v-for="(item, i) in list"
    7.         @click="select(i)">{{item}}</li>
    8.     </ul>
    9.   </div>
    11. <script>
    12. export default {
    13.   props: {
    14.     list: {
    15.       default: () => [],
    16.       type: Array
    17.     }
    18.   },
    19.   methods: {
    20.     select (index) {
    21.       MIP.setData({
    22.         city: this.list[index]
    23.     }
    25. }
    26. <script>
    28. <style scoped>
    29. .mip-city-list-wrapper {
    30.   padding: 20px;
    31. }
    32. .mip-city-list-wrapper ul {
    33.   list-style-type: none;
    34.   line-height: 28px;
    35.   margin-left: 20px;
    36. </style>

    在组件中，我们展示了城市列表，并允许用户点击城市列表的每一个 item，点击选择后会将全局数据 city 通过 MIP.setData API修改为选中的城市结果。

    修改全局数据时需要区分若干种情况，详情请阅读 可交互 MIP - 全局共享数据。上面的示例代码中是其中 的情况。

    点击选择了默认城市（上海）之外的城市后，可以看到页面上的当前选择城市已经更新。点击页面左上角的返回按钮，回到首页，你将发现，首页的城市数据也更新为选择后的城市。