Vue2+Vuex开发搜索功能报错：无法读取undefined的query属性

问题场景 #

基于Vue 2开发带搜索栏的搜索功能，项目使用Vuex做全局状态管理，运行时抛出如下报错：
Error in render: TypeError: Cannot read properties of undefined (reading 'query')
目前暂未定位到错误触发原因。

现有实现代码 #

1. elements.js（搜索数据存储 + Vuex Store定义） #

该文件用于存放待搜索元素数据，同时实现搜索相关的Vuex核心逻辑，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const elementos = () => {
    return [{
        "plataforma": "android",
        "titulo": "Principios",
        "palabras_clave": "principios android accesibilidad",
        "texto":""
    },
{
    "plataforma": "android",
    "titulo": "Colores",
    "palabras_clave": "color mobil android",
    "texto":""}]
};

export default new Vuex.Store({
    state: {
        elementos: elementos(),
        filter: {
            query: '',
            plataforma: true 
        }
    },
    mutations: {
        SET_QUERY (state, query){
            state.filter.query = query;
        },
        SET_PLATAFORMA (state){
            state.filter.plataforma = !state.filter.plataforma;
        }
    },
    getters: {
        filteredElements (state){
            let elem = state.elementos.filter(e => e.plataforma == state.filter.plataforma);
            if(state.filter.query.length > 2){
                return elem.filter(e => e.palabras_clave.toLowerCase().includes(state.filter.query))
            }
            return elem;
        }
    }
})

2. Principal.vue 组件 #

组件内放置了绑定v-model="search"的搜索输入框，组件脚本部分代码如下：

<script>
import Menu from "../components/Menu.vue"
import Texto from "../components/Texto.vue"
import Nav from "../components/Nav.vue"

import elements from '../elements.js'

export default {
  name: 'App',

  components: {
    Menu,
    Texto,
    Nav
  },

  computed: {
    search: {
      get (){
        return this.$store.state.filter.query;
      },
      set (val){
        this.$store.commit('SET_QUERY', val);
      }
    }

  }
};

</script>

报错截图 #

排查进展 #

• 已完成elements.js文件的导入
• 按代码逻辑判断filter下的query属性应当存在，暂未定位问题根源

问题原因与修复方案 #

核心报错原因 #

仅在组件中导入了Store实例，但未在Vue根实例初始化时注入Store，导致组件内访问的this.$store实际为undefined，读取state.filter.query时自然抛出属性读取失败的错误。

修复步骤 #

• 打开项目入口文件（通常为main.js），导入编写好的Store实例，在初始化Vue根实例时传入store配置项，完成Store注入：

import Vue from 'vue'
// 替换为实际的根组件路径
import App from './Principal.vue'
// 导入自定义的Store实例
import store from './elements.js'

new Vue({
  // 注入Store后，所有组件实例才能通过this.$store正常访问Store
  store,
  render: h => h(App)
}).$mount('#app')

• 修复搜索匹配的逻辑漏洞：现有逻辑仅对关键词字段做了小写转换，未对用户输入的搜索词做统一小写处理，大写输入时会出现匹配失效问题，修改Store中getters的对应代码：

getters: {
  filteredElements (state){
    let elem = state.elementos.filter(e => e.plataforma == state.filter.plataforma);
    if(state.filter.query.length > 2){
      const searchVal = state.filter.query.toLowerCase()
      return elem.filter(e => e.palabras_clave.toLowerCase().includes(searchVal))
    }
    return elem;
  }
}

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