Vuex Demo 講解

時間 2019-11-06

標籤 vuex demo 講解简体版

原文原文鏈接

做者: 混元霹靂手-ziksangjavascript

vuex官網的專業術語，讓有些人仍是感受，摸不着頭腦，作一些實用場景給你們看html

state 用來數據共享數據存儲
mutation 用來註冊改變數據狀態
getters 用來對共享數據進行過濾操做
action 解決異步改變共享數據

這個四大特徵就是核心，如何用怎麼用

接下來仍是按着咱們約定的來前端

此時採用的演示方式仍是用官方提供的vue-cli webpack版本

在src目錄下咱們創一個vuex文件夾，分別建立index.js,mutations.js,state.js,getters.js,actions.jsvue

好處：

這樣咱們可對四種特性進行分文件，這樣能夠更加明確，清楚java

咱們分別把這四個特性放入index.js中進行store的實列化webpack

再把實列化的store引入就是所謂的index.js文件夾引入到main.js中，也能夠同時把store註冊到每個組件中es6

state如何用？

在頁面中，title確定是必備，那每一個組件頁面的title都確定不同，那咱們如何去拿到title,title適合放在那裏，根據每一個頁面切換，而改變title,這個牽扯的就是組件與組件中的通訊web

咱們能夠在state.js中先聲明一數據值vuex

export default{
    title : "首頁"
}複製代碼

那咱們如何在首頁中拿到這個title值

那咱們在mian.js中再加入new Vue,綁定title做用域的實例代碼
咱們在computed裏進行數據監聽，
此時咱們就能夠從store裏拿到state.title
最後一步，咱們在index.html中咱們再進行{{title}}綁定vue-cli

index.html

<title>{{title}}</title>複製代碼

此時咱們運行一下，打開dev-tools你會發現

title這個數據已經在全局被共享了

matutions如何使用

應用場景：
若是咱們要改變頂層的共享數據，咱們應該要用matutions來進行改變，若是你作公衆號，後臺通常會在鏈接的上給你一些參數，比方說sid,ck,tm,或者一些其它東西，你想把他存在state中，若是去作，那咱們就經過matutions來進行註冊事件，爲了演示，我才這麼作

注意：
對於vuex，我只推薦state狀態存儲只在一個頁面中組件與組件這間的通訊，不適合誇頁在，放一些狀態

state.js

export default{
    START_PARMA : {},
    title : "首頁"
}複製代碼

START_PARMA用來存放我以上鍊接參數的數據，咱們先前必定要定意好

mutations.js

export default{
    getParam (state,Object) {
       state.START_PARMA = Object
    }
}複製代碼

咱們對改變state數據進行一個事件註冊，第一個參數是拿到state對象，第二個是傳入的參數

getParam官方說是type，其實就是註冊的事件名
能夠是單個參數
若是是多個參數，咱們則用對象放入，若是你寫兩個參數，會報錯

export default {
        name : 'advertisement',
        created () {
            const keyCode = sessionStorage.keyCode = getQueryString('keyCode')
            const keyWord = sessionStorage.keyWord =  keyCode.split("_")[0]
            const hunterCode = sessionStorage.hunterCode = keyCode.split("_")[1]
            const sid = sessionStorage.sid= getQueryString('sid')
            const ck = sessionStorage.ck = getQueryString('ck')
            const tm = sessionStorage.tm = getQueryString('tm')
            this.$store.commit('getParam',{
                keyCode,
                keyWord,
                hunterCode,
                sid,
                ck,
                tm
            })
        }
    }複製代碼

咱們本身建立一個視圖，而後在created裏進行截取參數，由於store是註冊到每一個組件中的，因此咱們要用this.$store來訪問，那commit就是一個觸發器，第一個是type類形名，第二個參咱們用對象的方式傳入，裏面用的是es6的語法

此時你會發現

此時的截取的狀態放到了一個對象裏，咱們就可使用了

getters如何使用

若是說getter就是對state裏的數據進行一些過濾，改造等等

那比方說State裏有一些這樣的數據

state.js

people : [
        {name : 'ziksang1',age:21},
        {name : 'ziksang2',age:10},
        {name : 'ziksang3',age:30},
        {name : 'ziksang4',age:40},
        {name : 'ziksang5',age:50},
        {name : 'ziksang6',age:30},
        {name : 'ziksang7',age:80}
    ]複製代碼

若是咱們定義這些數據，而後咱們要從，這些數據中篩選出年紀大於30的人，再進行返回，咱們就能夠用到getter,這裏的getter的意思就是對vuex頂層數據進行過濾，而不改動state裏本來的數據

getters.js

export default{
    changePeople: (state) =>{
        return state.people.filter(item=>{
            if(item.age>30){
                return true
            }
        })
    }
}複製代碼

好咱們如何應用呢，咱們在組件中裏只要寫入

created () {
   console.log(this.changePeople)
},
computed : {
            changePeople () {
                return this.$store.getters.changePeople
            }
        },複製代碼

那咱們能夠打開命臺看一下，看回的數據，

接下來你如何想對數據進行操做那就看你本身的了

action 如何使用？

action.是用來解決異步流程來改變state數據的，有想人說，那我直接在matution裏面進行寫進不就好了麻，那你能夠試一下，由於matution是直接進行同步操做的

mutations.js

export default{
    getParam (state,Object) {
       setTimeout(()=>{
            state.START_PARMA = Object
       },1000)
    }
}複製代碼

仍是拿上面例子，若是你在mutations裏進行異步操做，你會發現沒用，並不會起任何效果，那怎麼辦，只有經過action->mutations->states,這個流程進行操做

action.js

export default {
    getParamSync (context,Object) {
        setTimeout(()=>{
            context.commit('getParam',Object)
        },3000)
    }
}複製代碼

寫一個getParamSync函靈敏，第一個參數就是上下文，context是一個store對象，你也能夠用解構的方式寫出來,第二個參數仍是咱們要寫入的接收到的參數，來改變觸發mutations事件,再經過mutation來改變state,很好理解不難

而後咱們就在組件裏這麼調用就能夠了

this.$store.dispatch('getParamSync',{
                keyCode,
                keyWord,
                hunterCode,
                sid,
                ck,
                tm
            })複製代碼

那組合action又是怎麼玩呢？咱們有時候向後臺請求時，要經過第一個AJAX返回值來進行下一個action分發

咱們能夠用promise來進行異步處理

actions.js

export default {
    getParamSync (context,Object) {
        return new Promise((reslove,reject)=>{
            setTimeout(()=>{
                context.commit('getParam',Object)
                return reslove('成功')
            },3000)
        })

    },
    changetitleSync ({commit},title){
        setTimeout(()=>{
            commit('changetitle',title)
        },3000)
    }
}複製代碼

在getParamSync使用new promise以後，在resolve裏返回‘成功’，再分發一個changetitleSync改變title的action方法

mutations.js

export default{
    getParam (state,Object) {
       state.START_PARMA = Object
    },
    changetitle (state,title){
        state.title = title
    }
}複製代碼

再在註冊一個改變title的changetitle的type類型

組中間調用

created(){
 this.$store.dispatch('getParamSync',{
                keyCode,
                keyWord,
                hunterCode,
                sid,
                ck,
                tm
            }).then((res)=>{
                this.$store.dispatch('changetitleSync',res)
            })
}複製代碼

咱們就能夠在組件中進行一種鏈式調用，解決異步回調，來action套action,就成了一個組合action