利用 vuex 实现一个公用搜索器

安装

 npm i vuex 

vuex 的使用

1. 先创建好如图所示的文件：

2. 编写 modules 下的 params.js

const param = {
    state: {
        params: {}
    },
    mutations: {
        UPDATE_PARAMS: (state, data) => {  //更新数据
            state.params = data
        }
    }

}

export default param

3. 编写 getters.js 文件

const getters = {
  params:state => state.param.params
}

export default getters

4. 编写index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'
import param from './modules/searcher'
import getters from './getters'


Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    param
  },
  getters
})

export default store

5. 在 main.js 中 引入 store

import Vue from 'vue'
import App from './App.vue'
import store from './store'
...

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

6. 在编写搜索器组件

... 
<script>  
  import { mapMutations } from 'vuex'  //辅助函数
  export default {
    methods:{
     ...mapMutations([
                'UPDATE_PARAMS'
            ]),
     save(){ //保存参数的方法
           ...
           this.UPDATE_PARAMS(params)
    }
  }
}
</script>

7. 其他组件监听数据的变化

<template>
    ...
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        computed: {
            ...mapGetters([
                'params'
            ])
        },
        watch: {
            params: function (data) {
               // 搜索器数据变化时执行的代码
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>