VueX狀態管理器的應用

golden_hamster 發布于2019-08-02 11:08 / 3085人閱讀

摘要：級別在中進行請求數據請求數據的接口相當于調用了在中定義的修改狀態的方法就是在改變狀態時要修改的數據，需要在這傳遞過去。

VueX狀態管理器

cnpm i vuex axios -S
1 創建Vuex 倉庫
import Vue from "vue"
import Vuex from "vuex"
vue.use(Vuex)
const store = new VueX.store({
    state: {//存放狀態}，
    mutations:{//唯一修改狀態的地方，不在這里做邏輯處理}
})
export default store

2 在入口文件main.js下引入store
import store from "./store/index.js"
將store 放到根實例里  以供全局使用
new Vue({
    el:"#app",
    store,
    components:{App},
    template:
})
開始使用store(以home組件為例)

Vuex的使用也是一種漸進式的，你可以從最簡單的開始使用，根據經驗和技術的增加，再漸進增強對它的使用，如果按照級別算vuex的使用可以從最基本的t1級別開始，先總結最基本的前三個版本，后續有時間再總結其他的。

T1級別

1.
在hoome/script.js中進行請求數據
import Vue from "vue"
import axios from "axios"
export default {
    mounted(){
        axios.get("請求數據的接口")
        .then((res)=>{this.$store.commit("changeList",res.data)})
           //changeList相當于調用了在store.mutations中定義的修改狀態的方法
                    //res.data  就是在改變狀態時要修改的數據，需要在這傳遞過去。
        .catch((err)=>{console,log(err)})
        }
    }
2.
在store/index.js中定義
import Vue from "vue"
import Vuex from "vuex"
vue.use(Vuex)
const store = new VueX.store({
    state: {
        //存放狀態
        list: [ ]     //存放一個空的數組
}，
    mutations:{
        //唯一修改狀態的地方，不在這里做邏輯處理
        //定義一個修改list的方法
            //state 指上面存放list的對象，data 為在請求數據出傳過來請求到的數據
        changeList (state，data) {
            state.list = data  //將請求來的數據賦值給list
      }
    }
   })
export default store

3.
在home/index.vue中渲染


注意點：
（
如果我們在home組件中獲取的數據，可以在其他組件中使用，但是是當頁面刷新默認進入home頁，也就是相當于修改了數據，再點擊其他頁面也能有數據。如果我們在user組件中獲取的數據要在home組件中使用，當頁面刷新數據是不會顯示的，因為此時還沒有觸發user組件中的更改數據的方法，所以數據為空，當點擊user頁面時，就會有數據，這個時候再去點擊home頁面我們就能夠看到在home 組件中使用user組件中獲取的數據了。解決這種問題的辦法可以將數據存到本地一份或者都在首頁進行請求數據
）

T2級別

在頁面進行渲染的時候我們需要通過this.store.state去拿數據，這樣的寫法太長而且不太好
用計算屬性結合mapState去解決這個問題
1
在home/script.js中進行操作
import Vue from "vue"
import mapState from "vuex"
import axios from "axios"
export default {
    computed:{
        //mapState為輔助函數
        ...mapState(["list"])
    },
    mounted(){
        axios.get("請求數據的接口")
        .then((res)=>{this.$store.commit("changeList",res.data)})
        .catch((err)=>{console,log(err)})
        }
    }

2
在home/index.vue中渲染

T3級別



  使用常量去代替事件類型(便于查看狀態，利于維護)
    1
    在store下創建mutation-type.js
    export const  CHANGE_LIST = "CHANGE_LIST"
    
    2
    在store/index.js引入mutation-type.js
    import Vue from "vue"
    import Vuex from "vuex"
    import {CHANGE_LIST }  from‘./mutation-type.js’
    vue.use(Vuex)
    const store = new VueX.store({
        state: {
            list: [ ]     //存放一個空的數組
    }，
        mutations:{
        //我們可以使用Es6風格的計算屬性命名功能來使用一個常量作為函數名
            [CHANGE_LIST] (state，data) {
                state.list = data  //將請求來的數據賦值給list
          }
        }
       })
    export default store
    
    3
    在home/script.js中進行引入
    import Vue from "vue"
    import mapState from "vuex"
    import axios from "axios"
    import {CHANGE_LIST} from ‘../../store/mutation-type.js’
    export default {
        computed:{
            //mapState為輔助函數
            ...mapState(["list"])
        },
        mounted(){
            axios.get("請求數據的接口")
            .then((res)=>{this.$store.commit(CHANGE_LIST,res.data)})
            .catch((err)=>{console,log(err)})
            }
        }

GPU云服務器云服務器寶塔應用管理器寶塔應用管理器使用服務器管理器的使用項目管理軟件的應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52790.html

VueX狀態管理器的應用

摘要：級別在中進行請求數據請求數據的接口相當于調用了在中定義的修改狀態的方法就是在改變狀態時要修改的數據，需要在這傳遞過去。 VueX狀態管理器 cnpm i vuex axios -S 1 創建Vuex 倉庫 import Vue from vue import Vuex from vuex vue.use(Vuex) const store = new VueX.store({ ...

shadowbook 2019-08-29 16:16 評論0 收藏0
VueX狀態管理器的應用

摘要：級別在中進行請求數據請求數據的接口相當于調用了在中定義的修改狀態的方法就是在改變狀態時要修改的數據，需要在這傳遞過去。 VueX狀態管理器 cnpm i vuex axios -S 1 創建Vuex 倉庫 import Vue from vue import Vuex from vuex vue.use(Vuex) const store = new VueX.store({ ...

sydMobile 2019-08-23 10:39 評論0 收藏0
vuex 閑置狀態重置方案

摘要：為了做到頁面的極致優化，我們需要將那些閑置的狀態重置，以減小占用的內存空間。不如當路由改變時去重置中的所有狀態。這里只是提供一種重置狀態的一種方案，如果有更好方案還請各位看官留言。前言大型單頁應用（后面都是指spa），我們往往會通過使用狀態管理器 vuex 去解決組件間狀態共享與狀態傳遞等問題。這種應用少則幾十個單頁，多則上百個單頁。隨著路由的頻繁切換，每個路由對應的 vuex 中...

junfeng777 2019-08-21 18:36 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

fish 2019-08-29 11:27 評論0 收藏0
無痛學會各種 2 的 Vue2+Vuex2+Webpack2 前后端同構渲染

摘要：它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~手把手教你從零寫一個簡單的 VUE 感謝有人看我扯技術，這篇文章主要介紹最近非常火的vue2前端框架的特點和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 評論0 收藏0