vuex結合localStorage的使用方法

2021-10-02 16:52:48 字數 3393 閱讀 4884

參考鏈結2

參考鏈結3

先看一下我的目錄結構:

1.main.js 入口 載入元件 初始化等

import vue from


'vue'


import store from


'../store/index'


vue.config.productiontip =


false


newvue


()
2.store.js—index.js 總檔案

import vue from


"vue"


;import vuex from


"vuex"


;import state from


'./state'


;import getters from


'./getters'


;import mutations from


'./mutations'


;import actions from


'./actions'


vue.


use(vuex)


;export


default


newvuex.store


()
3.store.js—state.js 狀態資料儲存

const state =,,


,], shoplist:[,


,,]}


export


default state
4.store.js—mutations.js （改變state.js裡的值，順便利用localstorage儲存本地值，使得重新整理瀏覽器後資料不會消失）

const mutations =


);// }


reduceprice:(


state, payload


)=>);


localstorage.


setitem


('ceshi'


,json


.stringify


(state.productlist)


)return state.productlist


}}export


default mutations
5.store.js—actions.js

const actions =


,2000);


}// 也可以這麼寫 實際開發專案中我多數是這麼寫的


// reducepriceasync: ( , payload) => , 2000);


// }


}export


default actions
6.store.js—getters.js(使用getters來獲取我們的state，因為它算是state的乙個計算屬性)

const getters =


,getshoplist


:state


=>


,getsaledprice


:state


=>;}


);return saleproduct;}}


export


default getters
最後貼上兩個元件的**：

listone

="list-one"


>


/h1>


for=


"(product, index) in getsaledprice"


:key=


"index"


>


名稱：}


<


/p>


**：}


<


/p>


<


/li>


<


/ul>


"reduceprice(4)"


>降價<


/button>


"reducepriceasync(4)"


>非同步降價<


/button>


<


/div>


<


/template>


import


from


"vuex"


;export


default


// },


computed:


, methods:


,// reducepriceasync()


// this.$store.commit(mutationname)是用來觸發乙個mutation的方法


// this.$store.dispath(actionname)是用來觸發乙個actionname的方法


...mapmutations([


"reduceprice"])


,...


mapactions([


"reducepriceasync"])


},mounted()


};<


/script>


<


!-- add "scoped" attribute to limit css to this component only --


>


h1,h2 


.list-one 


ul li 


button 


<


/style>listtwo
="list-two"

>

/h1>

for=

"(product, index) in getproductlist"

:key=index>

名稱：}

<

/p>

**：}

<

/p>

<

/li>

<

/ul>

<

/div>

<

/template>

import

from

'vuex'

export

default

}<

/script>

<

!-- add "scoped" attribute to limit css to this component only --

>

h1, h2

.list-two

ul li

<

/style>關於localstorage的使用請見：

用script儲存讀取localStorage

要求有一定script基礎 儲存讀取localstorage 讀取input標籤 獲取input name nickname 傳過來的值，返回的是列表取第乙個 var element document.getelementsbyname nickname 0 取nickname的值 var nick...

cookie與本地儲存localStorage

cookie預設是臨時儲存的，當瀏覽器關閉時，自動銷毀。如果想長時間存放乙個cookie，同時需要設定乙個過期時間。localstorage.keyname value localstorage keyname value 注 localstorage是長期資料儲存，sessionstorage臨時...

jquery 的本地儲存 localStorage

前面寫了jquery 本地儲存 cookie 的基本用法 jquery cookie示例 只提示一次的彈框 兩篇介紹cookie用法的篇章之後，下面來看看 localstorage 這個本地儲存的方式。2 localstorage 儲存在本地，容量為5m或者更大，不會在請求時候攜帶傳遞，在所有同源視...