Vuex Getter无法访问状态及状态值无法更新问题求助

嘿，我来帮你搞定这两个Vuex的小问题！咱们一个个来解决：

问题1：无法通过Getter访问状态 #

你的store里已经正确定义了semuaJasa这个getter，之所以用this.$store.getters.semuaJasa没显示内容，大概率是拼写不一致或者调用方式的小问题。

你可以按照下面的步骤排查和修复：

1. 确保组件里的computed属性调用的getter名称和store里的完全一致（包括大小写、拼写）：

   // Jasa.vue的computed部分
   computed:{
       semuaJasa(){
           // 替换成getter的调用方式
           return this.$store.getters.semuaJasa;
       }
   }
   

2. 如果还是没显示，打开浏览器控制台，在组件的mounted钩子中输入console.log(this.$store.getters)，看看semuaJasa是否存在于getters对象中，这样能快速定位是不是getter定义有问题。

你的store定义是没问题的，只要确保调用名称正确，getter就能正常返回状态数据。

问题2：状态更新后页面不刷新 #

Vuex的状态更新必须通过Mutations来操作，而且要遵守Vue的响应式规则——直接修改state的话，虽然state的值会变，但Vue无法检测到变化，导致页面不更新。

修复步骤： #

1. 在store.js里添加mutations，用来处理状态更新：

   export const store = new Vuex.Store({
       state:{
           jasa:[ 
               // 你的原有数据
           ]
       },
       getters:{
           semuaJasa:state=>{
               return state.jasa;
           }
       },
       // 添加这部分mutations
       mutations: {
           // 添加新的jasa条目
           tambahJasa(state, newJasa) {
               // 用push方法添加数组元素，Vue能检测到数组变化
               state.jasa.push(newJasa);
           },
           // 如果需要修改现有条目，可以加这个mutation
           ubahJasa(state, {index, updatedJasa}) {
               // 用Vue.set确保响应式更新
               Vue.set(state.jasa, index, updatedJasa);
           }
       }
   })
   

2. 在组件里更新状态时，必须通过commit调用mutation，不能直接修改state：

   // 比如在某个组件的方法中添加新服务
   tambahJasaBaru() {
       const newJasa = { nama: '新服务名称', harga: 120000, diskon: false };
       // 调用mutation更新状态
       this.$store.commit('tambahJasa', newJasa);
   }
   

注意： #

如果是修改数组的索引位置元素，或者给对象添加新属性，一定要用Vue.set（或者this.$set），比如：

// 修改数组中第0个元素
Vue.set(state.jasa, 0, { nama: '修改后的服务', harga: 60000, diskon: true });
// 给某个服务添加新属性
Vue.set(state.jasa[0], 'deskripsi', '这是服务的详细描述');

这样修改后，状态的变化就能被Vue检测到，页面也会自动刷新啦！

内容的提问来源于stack exchange，提问作者Philip Purwoko