这个问题困扰了我好久 ,
最终还是解决了 : 我最开始想岔了, 我看见其他大佬们都说不要直接用 this.$store.state.aaa=bbb; 将 aaa 的值改变成 bbb , 不建议怎样赋值. 所以让我只想着在 mutation 里面改变 state 的值, 而我要调用本地的 JSON 数据来赋值给 state 好让全部的组件都能共享这些数据, 然后才将这些数据加载到 dom 上然后渲染 DOM
我只好在 action 中来加载本地 JSON 数据, 然后通过 mutation 来改变 state 的值, 问题就出在这里,(action 中可以执行异步函数, mutation 中只能是同步的)(请求 JSON 数据是异步操作) 我不管将 action 的调用函数放在哪个钩子下面, JSON 数据的加载都比 DOM 渲染得慢得多 , 中途打印全是 Promise(还没搞完的意思) .
最后我是将 JSON 数据请求放在外面的 created 钩子中, 然后再接下来 this.$store.commit("increment",data.data.data); 传给 matation 函数我请求到的 JSON 数据对象, 在 matation 中将 data.data.data 赋值给 state 的 . 完美解决了问题.(vuex 数据刷新后效失, 我博客有一篇有说明解决办法哟~~
贴个代码:
- import Vue from 'vue'
- import Vuex from 'vuex'
- Vue.use(Vuex)
- export default new Vuex.Store({
- state: {
- panghu: ""
- },
- mutations: {
- increment(state, apidata) {
- state.panghu = apidata;
- },
- },
- created() {
- if (
- JSON.parse(
- !localStorage.getItem("panghu") ||
- localStorage.getItem("panghu") == "undefined"
- )
- ) {
- axios.get("/api/panghu").then(data => {
- this.$store.commit("increment",data.data.data);
- this.home_one = this.$store.state.panghu.home_one;
- this.home_two = this.$store.state.panghu.home_two;
- this.home_three = this.$store.state.panghu.home_three;
- let panghu = this.$store.state.panghu;
- localStorage.setItem("panghu", JSON.stringify(panghu));
- });
- } else {
- let panghus = JSON.parse(localStorage.getItem("panghu"));
- this.$store.commit("increment",panghus);
- this.home_one = panghus.home_one;
- this.home_two = panghus.home_two;
- this.home_three = panghus.home_three;
- }
来源: http://www.bubuko.com/infodetail-3259459.html