Importing local JSON files into Vuex state

Question

Importing local JSON files into Vuex state

I am looking to import data from a local JSON file into a state value setting within my Vue.js application.

store/index.js

import { createStore} from 'vuex'

export default createStore({
  state: {
    settings: {}
  }
})

assets/json/settings.json

{
  "theme": "dark",
  "loggedIn": true,
  "mobile": false,
}

I need the imported data to be reactive so that it can work with computed properties in my Vue components. Ideally, I would like to find a way to save changes back to the JSON file using something like fs. I am utilizing Vuex for managing the data across multiple components.

How can I assign the values from the JSON file to the state.settings variable? 😅

javascript json vue.js vuex

Answer 1

Answer №1

To import data from a json file, simply treat it like you would a js file.

You can then include this imported data in the state initialiser.

import settings from "./settings.json";
export default createStore({
  state() { // Note: state should be a function to create a state
    return {
       settings: settings
    }
  }
})

Make sure your js compiler options include:

"resolveJsonModule": true

The browser should not directly edit this file. Save changes using cookies, local storage, session storage, or by calling a webservice on your server.

Answer 2

To import data from a json file, simply treat it like you would a js file.

You can then include this imported data in the state initialiser.

import settings from "./settings.json";
export default createStore({
  state() { // Note: state should be a function to create a state
    return {
       settings: settings
    }
  }
})

Make sure your js compiler options include:

"resolveJsonModule": true

The browser should not directly edit this file. Save changes using cookies, local storage, session storage, or by calling a webservice on your server.

Importing local JSON files into Vuex state

Answer №1

Similar questions

Trouble with the display:none attribute in Firefox and Chrome

Transform JSON data into XLSX format for all files with a .json extension within the specified directory

What is the best way to change function.bind(this) to an arrow function in a react native application?

Creating a dynamic HTML table using Vue 3

The jquery methods might encounter an issue with an undefined object

Difficulty Communicating Recapcha 2 with the PHP Script

Transferring a JSON object from an Android device to a server

Converting a nested JSON array into a DataFrame using Spark

The issue of invalid prop in Vue Utils

What causes the non-reachable part of the ternary operator to be evaluated prior to updating the state with setTimeout?

A guide to retrieving location markers from Firebase's real-time database and displaying them on a map view using Xcode and Swift

Storing and Retrieving Multiple Data with localStorage

How to efficiently pass multiple inputs from an HTML form to a controller in AngularJS using a single ng

Encountering timeout issues with Next.JS fetch and Axios requests on Vercel production environment

Tips for quietly printing a PDF document in reactjs?

Improving List performance with React.cloneElement

Error on Network: 400 BAD REQUEST in Ionic framework

Error when accessing JSON property in Angular with Ionic 2: A Strange TypeError

Acquiring the console log data from Firefox version 43 using Selenium, all without the use of any

Exploring the power of Vue with Cypress testing and streamlining the development process