페이지를 새로 고친 후 Vuex persistedState가 작동하지 않음

페이지를 새로 고친 후 Vuex persistedState가 작동하지 않음

npm install로 지속 상태를 설치했는데 --vuex-perersstate 저장.

그런 다음 Vuex store.js 파일을 다음과 같이 설정하십시오.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    title: ''
  },
  mutations: {},
  actions: {},
  getters: {},
  plugins: [createPersistedState()]
})

..그리고 또 다른 구성 요소에서는 값을 저장소에 전달하고 있다.제목:

this.$store.state.title = this.input

그리고 그것은 동작한다.

하지만 페이지를 새로 고친 후(F5)this.input더 이상 에 저장되지 않음this.$store.state.title그리고 그것은 나의 사이트 기능을 망가뜨린다.

내가 뭘 잘못하고 있는 거지?

편집: 정말 바닐라 스타일로 작동하게 되었다.

첫 번째:

this.$store.state.title = this.input
localStorage.setItem('title', this.$store.state.title)

다음:

mounted () {
    this.$store.state.title = localStorage.getItem('title')
  }

Vuex 플러그인이 작동하지 않는 이유를 계속 알고 싶음:(

아래 코드를 적용해보시겠습니까?

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    title: ''
  },
  mutations: {},
  actions: {},
  getters: {},
  plugins: [createPersistedState({
     key: 'keyname',
     storage: window.localStorage         
  })]
})

"CreatePersistedState" 내에서 경로와 '경로: ['accessRights's''를 다른 속성으로 설정할 수 있다.만약 당신이 길을 제시하지 않는다면, 그 전체는 끈기가 될 것이다.

나는 #vuex 스토어 모듈을 사용하고 있는데, 이것은 #vue #vuex #laravel 어플리케이션으로 #vuex-perersistate를 사용하여 저장 상태를 지속하는 데 효과가 있었다.HTTPS를 사용하지 않는 경우 더 많은 정보를 제공하고 False를 보호하십시오.

import createPersistedState from 'vuex-persistedstate';
   import Cookies from 'js-cookie';
   Vue.use(Vuex);
   export default new Vuex.Store({
     strict:true,
   modules:{
    party,
    contract
    },
   plugins: [createPersistedState(
    {
        paths:['party.selectedParty','contract.contracts', 
   'contract.partyId', 
   'contract.partyContracts',
        'contract.selectedContract',

         ],
        storage: {
            getItem: key => Cookies.get(key),
            setItem: (key, value) => Cookies.set(key, value, { expires: 3, 
         secure: false }),
            removeItem: key => Cookies.remove(key)
          },

    }
       )],
   });

알 수 없는 이유로 쿠키에서 상태를 업데이트하지 않는 경우도 있다.가장 단순한 솔루션은 다음과 같은 방법으로 스토리지를 로컬 스토리지로 변경하는 것이다.

      createPersistedState({
                key: 'somekey',
                storage: window.localStorage,
        // getState: (key) => Cookies.getJSON(key),
        // setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
      })

나의 경우, 이 연장에도 같은 문제가 있었지만, 나는 그 문제가 나의 Vuex의 오용에서 비롯된 것이 아니라는 것을 깨달았다.다음에 의해 상태 값을 변경했다.this.$storage.state.VARIABLENAME. 틀렸다.내가 Vuex 설명서를 다시 읽었을 때, 나는 돌연변이에 대한 상태 값에 액세스해야 한다는 것을 깨달았다.이렇게 했더니 연장이 제대로 됐다.

다음과 같은 방법으로 상태 값을 수정하십시오.

context.commit("SET_VARIABLENAME","value")

Vuex 저장소에 있는 동안 상황은 다음과 같아야 한다.

mutations: {
   
    SET_VARIABLENAME(state,status){
      state.MYVARIABLE= status
    },

그리고 Vuex의 주 블록에서:

state: {
    MYVARIABLE: null,
}

단지 그 때 뿐인 것 같다.commit통화 완료:

인덱스.js:

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [createPersistedState()],
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
});

new Vue({
  el: "#app",
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    assign() {
      store.state.count = 4;
    },
    increment() {
      store.commit("increment");
    },
    decrement() {
      store.commit("decrement");
    }
  }
});

인덱스.포인트

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
  <p>
    <button @click="assign">Assign 4</button>
  </p>
  <small>
    Check out your localStorage to see the updates.
  </small>
</div>

꾸러미json

{
  "name": "vuex-persistedstate",
  "version": "1.0.0",
  "description": "Basic example of the vuex-persistedstate plugin",
  "keywords": ["vue", "vuex", "vuex-persistedstate"],
  "main": "index.js",
  "dependencies": {
    "vue": "2.5.22",
    "vuex": "3.1.0",
    "vuex-persistedstate": "2.5.4"
  }
}

https://codesandbox.io/embed/vuex-persistedstate-fhb4o?fontsize=14&hidenavigation=1&theme=dark

참조URL: https://stackoverflow.com/questions/58775811/vuex-persistedstate-does-not-work-after-refreshing-page