delete item from local storage and VueX

Question

In the beginning, I created a recipe and stored the recipe using Local Storage and VueX by adding the recipe to the Matrix "State" This project is to display a set of recipes with the ability to delete a recipe. As shown in the picture. How can I delete a recipe from LOCAL STORAGE and VueX?

store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import image1 from '../assets/img/image4.jpg'
import image2 from '../assets/img/image2.jpg'
import image3 from '../assets/img/image3.jpg'
import image4 from '../assets/img/insta2.jpg'
Vue.use(Vuex)
export const store = new Vuex.Store({
    state:{
        loadedRecipes:[
            {imageUrl:image3,
                id:'3' , title:'Homemade Burger',
                description:'Small plates, salads & sandwiches - an intimate setting with 12 indoor 
                           seats plus patio seating..',
                ingredients: '25 Eges 30kg Water'
            },
            {imageUrl:image1,
                id:'1' , title:'Cake',
                description:'Small plates, salads & sandwiches - an intimate setting with 12 indoor 
                       seats plus patio seating..',
                ingredients: '25 Eges 30kg Water'
            },
            {imageUrl:image4,
                id:'4' , title:'Salad',
                description:'Small plates, salads & sandwiches - an intimate setting with 12 indoor 
                        seats plus patio seating..',
                ingredients: '25 Eges 30kg Water'
            },
            {imageUrl:image2,id:'2' ,
             title:'Kabseh',description:'Small plates, salads & sandwiches - an intimate setting with 
                12 indoor seats plus patio seating.',
             ingredients: '25 Eges 30kg Water'
            }
    
          ],
          user:{
              id:'nvdcjavdah',
              registeredRecipes:['jhvjhvmnbvhj']
          }
    },
   mutations:{
        createRecipe(state,payload){
            Vue.set(state, 'loadedRecipes', [...state.loadedRecipes, payload])
            state.loadedRecipes.push(payload)
        }
    },
    actions:{
        // createRecipe(payload){
        //     const recipe = {
        //         title : payload.title,
        //         imageUrl: payload.imageUrl,
        //         description:payload.description,
        //         ingredients:payload.ingredients,
        //         id:'hgxckjh'
        //     }
        //     console.log(recipe)
        // }
    },
    getters:{
        loadedRecipes(state){
            return state.loadedRecipes.sort((RecipeA,RecipeB)=>{
                return RecipeA.id >RecipeB.id
            })
        },
        featuredRecipes(state,getters){
            return getters.loadedRecipes.slice(0,5)
        },
        loadedRecipe(state){
            return (recipeId)=>{
                return state.loadedRecipes.find((recipe)=>{
                    return recipe.id === recipeId
                })
            }
        }
    }
})

Recipes.vue: This code is for displaying all recipes:

  <template>
  <v-container>
    <v-layout row wrap v-for="recipe in Recipes" :key="recipe.id" class="mb-2">
      <v-flex xs12 sm10 md8 offset-sm1 offset-md2>
        <v-card class="grey lighten-4 pl-3 ">
          <v-container fluid>
            <v-layout row>
              <v-flex xs5 sm4 md3>
                <v-img height="180px" :src="recipe.imageUrl"></v-img>
              </v-flex>
              <v-flex xs7 sm8 md9>
                <v-card-title primary-title>
                  <div>
                    <h5 class="color mb-0">{{ recipe.title }}</h5>
                    <div>
                      <!-- JULY 12, 2019 GRILLED CHICKEN WITH FRESH CHERRY SALSA This
                    is a sponsored post written by me on behalf of Draper Valley.
                     -->
                      {{ recipe.description }}
                    </div>
                  </div>
                </v-card-title>
                <v-card-actions>
                  <!-- <v-btn text left :to="'/recipe/'+ recipe.id" class="color"> -->
                  <!-- <v-icon left light class="color"> eco</v-icon> -->
                  <!-- View Recipe -->
                  <!-- </v-btn> -->
                  <v-flex>
                    <v-btn
                      text
                      left
                      :to="'/recipe/' + recipe.id"
                      class="green darken-1  btn-style"
                    >
                      View Recipe
                    </v-btn>
                  </v-flex>
                  <v-flex xs5 sm4 md2>
                    <v-btn class="deleteColorIcon">
                      <v-icon left class=" pl-4">
                        mdi-delete
                      </v-icon>
                      <!-- </v-btn> -->
                    </v-btn>
                  </v-flex>
                </v-card-actions>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  computed: {
    Recipes() {
      return this.$store.getters.loadedRecipes;
    },
  },
  methods: {
    DeleteRecipe(id) {
      this.$router.push("/recipe/" + id);
    },
  },
};
</script>
<style scoped>
.color {
  color: #43a047;
}
.btn-style {
  color: #fafafa;
}
.deleteColorIcon {
  color: #e53935;
}
</style>

Answer 1

Create an action;

    deleteRecipe({commit}, id) {            
          commit('delete_recipe', id)
      }
     

On mutation;

delete_recipe(state, id){
 index = state.loadedRecipes.findIndex(recipe => recipe.id == id)
 state.loadedRecipes.splice(index, 1)
}