vuex存储数组(新建，增，删，更新)并存入localstorage定时删除功能实现

下面我将详细讲解如何使用vuex存储数组并实现新建、增加、删除和更新功能，并将其保存到localStorage中并实现定时删除功能。

步骤一：安装vuex

首先我们需要安装vuex，可以使用以下命令：

npm install vuex --save

步骤二：创建store

在src目录下创建一个store文件夹，在其下新建一个index.js文件作为vuex的状态管理入口文件。

在index.js文件中，我们需要使用vuex提供的createStore方法来创建一个store，并将其导出。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    newItem(state, item) {
      state.items.push(item)
    },
    updateItem(state, payload) {
      const item = state.items.find(i => i.id === payload.id)
      if (item) {
        item.title = payload.title
        item.description = payload.description
      }
    },
    removeItem(state, id) {
      state.items = state.items.filter(i => i.id !== id)
    },
    setItems(state, items) {
      state.items = items
    }
  },
  actions: {
    addItem({ commit }, item) {
      commit('newItem', item)
    },
    editItem({ commit }, item) {
      commit('updateItem', item)
    },
    deleteItem({ commit }, id) {
      commit('removeItem', id)
    },
    loadItems({ commit }) {
      const items = localStorage.getItem('items')
      if (items) {
        commit('setItems', JSON.parse(items))
      }
    },
    saveItems({ state }) {
      localStorage.setItem('items', JSON.stringify(state.items))
    }
  },
  strict: true,
})

export default store

在这个状态管理器中，我们定义了以下内容：

• state: 用来存储列表项的数组。
• mutations: 定义了四个函数，用于增、删、改和设置列表数据。
• actions: 定义了五个函数，分别用于增、删、改、获取和保存列表数据。
• strict: 开启状态更改的严格模式。

步骤三：使用store

到目前为止，我们已经完成了state管理中的核心功能。接下来，我们需要在Vue组件中引用store并使用它来管理state。

在你的Vue组件中，你可以使用以下方法引入store：

import store from '@/store'

接着，你可以使用以下代码片段添加数据到store中：

this.$store.dispatch('addItem', item)

以上的代码会将item对象添加到store中。另外，你也可以使用以下代码从store中删除项目：

this.$store.dispatch('deleteItem', id)

步骤四：使用localStorage

我们已经可以存储列表项目并从store中管理它们，现在我们需要将它们持久化保存到localStorage中。

为此，我们需要在actions中添加两个方法：loadItems和saveItems。

其中，loadItems方法负责加载从localStorage中获取的数据，而saveItems方法负责将store中的数据存储到localStorage中。

我们可以在loadItems方法中使用以下代码从localStorage中加载列表项：

loadItems({ commit }) {
  const items = localStorage.getItem('items')
  if (items) {
    commit('setItems', JSON.parse(items))
  }
},

在saveItems中，我们可以使用以下代码将store中的数据保存到localStorage中：

saveItems({ state }) {
  localStorage.setItem('items', JSON.stringify(state.items))
}

步骤五：实现定时删除功能

现在我们已经能够存储列表项目并从store中管理它们，也已经将其保存到了localStorage中。接下来，我们需要实现一个定时删除功能。

为此，我们可以添加一个名为“expiration”的字段来存储列表项的过期时间。接着，我们需要在时间到期时从store中删除项目。

我们可以使用以下代码来实现这一点：

setInterval(() => {
  const now = new Date().getTime()
  const expiredItems = state.items.filter(item => item.expiration < now)
  expiredItems.forEach(item => {
    commit('removeItem', item.id)
  })
}, 60000)

上述代码将每分钟执行一次，删除所有已过期的列表项。

示例说明：

1. 添加项目：

const item = {
  id: 1,
  title: 'Todo1',
  description: 'This is Todo1',
  expiration: new Date().getTime() + 60 * 60 * 1000
}
this.$store.dispatch('addItem', item)

1. 删除项目：

this.$store.dispatch('deleteItem', id)

以上就是如何使用vuex存储数组，并在localStorage中实现定时删除功能的完整攻略。希望对你有所帮助！