Vue學習之旅----vuex實現不同元件的資料共享 資料持久化
阿新 • • 發佈:2018-12-16
vuex實現不同元件的資料共享 資料持久化
當我們清除congsole和network後,重新整理一次,算是第一次請求,然後切換選項卡,當再回到使用者後,沒有再請求介面資料,只是載入vuex裡的資料,即快取到list裡的資料.
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 在vuex中用於儲存資料 var state = { count: 1, list: [] } // mutations裡是放方法,主要改變state裡的數 var mutations = { incCount () { state.count++ }, // 要傳值,必須寫state addList (state, data) { state.list = data } } // getter 有點類似計算屬性 改變state裡面的count資料的時候會觸發 getters裡面的方法 獲取新的值 (基本用不到) var getters = { computedCount (state) { return state.count * 2 } } /* 4、 基本沒有用 Action 類似於 mutation,不同在於: Action 提交的是 mutation,而不是直接變更狀態。 Action 可以包含任意非同步操作。 */ var actions = { // 因此你可以呼叫 context.commit 提交一個 mutation incMutationsCount (context) { // 執行 mutations 裡面的incCount方法 改變state裡面的資料 context.commit('incCount') } } // 例項化vuex的store const store = new Vuex.Store({ state, mutations, getters, actions }) export default store
<template> <!-- 所有的內容要被根節點包含起來 --> <div id="home"> 我是首頁元件 <button @click="goNews()">通過js跳轉到新聞頁面</button> <mt-button type="default">default</mt-button> <br> <mt-button type="primary">primary</mt-button> <mt-index-list> <mt-index-section index="A"> <mt-cell title="Aaron"></mt-cell> <mt-cell title="Alden"></mt-cell> <mt-cell title="Austin"></mt-cell> </mt-index-section> <mt-index-section index="B"> <mt-cell title="Baldwin"></mt-cell> <mt-cell title="Braden"></mt-cell> </mt-index-section> <mt-index-section index="C"> <mt-cell title="ccc"></mt-cell> <mt-cell title="ccccc"></mt-cell> </mt-index-section> <mt-index-section index="D"> <mt-cell title="DDD"></mt-cell> <mt-cell title="DDDD"></mt-cell> </mt-index-section> <mt-index-section index="Z"> <mt-cell title="Zack"></mt-cell> <mt-cell title="Zane"></mt-cell> </mt-index-section> </mt-index-list> <hr> <h2>呼叫store裡的資料{{this.$store.state.count}}----{{this.$store.getters.computedCount}}</h2> <button @click="changeCount()">改變store裡的值</button> </div> </template> <script> // 引入store import store from '../Vuex/store' export default { data () { return { msg: '我是一個home元件' } }, // 註冊store store, methods: { goNews () { this.$router.push({ name: 'news' }) }, changeCount () { // 改變vuex store裡的值 // 觸發vuex store 裡的mutations裡的incCount方法 this.$store.commit('incCount') } } } </script> <style lang="scss" scoped> </style>
<template> <div id="user"> 我是使用者元件 <br> <v-actionsheet></v-actionsheet> <br> <mt-button @click.native="flag = true" size="large">選擇使用者頭像</mt-button> <mt-actionsheet :actions="actions" v-model="flag"></mt-actionsheet> <hr> <h2>呼叫store裡的資料{{this.$store.state.count}}</h2> <button @click="changeCount()">改變store裡的值</button> <hr> <ul> <li v-for="(item,index) in list" :key=index> {{item.title}} </li> </ul> </div> </template> <script> import store from '../Vuex/store' import ActionSheet from './ActionSheet.vue' export default { data () { return { msg: '我是一個使用者元件', list: [], flag: false, actions: [] } }, // 註冊store store, components: { 'v-actionsheet': ActionSheet }, methods: { takePhoto () { alert('執行拍照') }, openAlbum () { alert('開啟相簿') }, changeCount () { // 改變vuex store裡的值 // 觸發vuex store 裡的mutations裡的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() } this.actions = [{ name: '拍照', method: this.takePhoto }, { name: '從相簿中選擇', method: this.openAlbum }] } } </script> <style lang="scss" scoped> </style>
<template>
<div id="app">
<router-link to="/home">首頁</router-link>
<router-link to="/news">新聞</router-link>
<router-link to="/user">使用者</router-link>
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang='scss' scoped>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>