vue2.0+vuex+localStorage代办事项应用实现分析

这篇文章主要为大家详细介绍了vue2.0+vuex+localStorage代办事项应用实现分析，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

vue2.0+vuex+localStorage 待办事项源码：https://github.com/Mynameisfwk/vue-Todo-list

参考代码：https://github.com/Mynameisfwk/vivo-shop

 

代码预览

 

 

vuex官方文档 https://vuex.vuejs.org/ 我觉的官方文档说明很详细

localStorage 用来本地储存数据

代码如下：

const state={
 home:localStorage["home"]?JSON.parse(localStorage["home"]): [],
 item:localStorage["item"]?JSON.parse(localStorage["item"]): [],
}

export default state

代码如下：

const mutations={
 
 [types.SET_SHIXIANG](state,data){
  state.home.push(data)
  localStorage.setItem("home",JSON.stringify(state.home));
 },
 
 [types.SET_YES](state,data){
  state.item.push(data)
  localStorage.setItem("item",JSON.stringify(state.item));
 }
}

export default mutations

代码如下：

const actions={
 setOrder ({commit}, data) {
  commit('SET_SHIXIANG', data);
 },
 setYes({commit},data){
  commit('SET_YES',data)
 }
}
export default actions

 

项目截图

 

【图片暂缺】

【图片暂缺】

 

项目运行

 

代码如下：

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

 

本文来自：http://www.q1010.com/184/5484-0.html

注：关于vue2.0+vuex+localStorage代办事项应用实现分析的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js