欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue2.0+vuex+localStorage代办事项应用实现详解

程序员文章站 2022-06-14 11:38:30
vue2.0+vuex+localstorage 待办事项源码:https://github.com/mynameisfwk/vue-todo-list 参考代码:htt...

vue2.0+vuex+localstorage 待办事项源码:https://github.com/mynameisfwk/vue-todo-list

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

代码预览

vuex官方文档 我觉的官方文档说明很详细

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

项目截图

vue2.0+vuex+localStorage代办事项应用实现详解

vue2.0+vuex+localStorage代办事项应用实现详解

项目运行

# install dependencies
npm install

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

# build for production with minification
npm run build