vuex使用-搜索跳转

2019独角兽企业重金招聘Python工程师标准>>>

实现点击跳转到搜索页，搜索页点击搜索返回到列表并携带输入的值作为查询条件

                                                                                |

                                                                                |

 

 

一、store.js

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

Vue.use(Vuex)//使用Vuex

export const store = new Vuex.Store({
    state:{
        //设置属性
        defaultSearchData: "请输入想要搜索信息",
        searchData: ""
    },
    getters:{
        //获取属性的状态
        //获取到设置的属性的状态
    },
    mutations:{
        //改变属性的状态
        //更改用户的状态信息
        changeDefaultSearchData(state,str){
            state.defaultSearchData = str;
        },
        changeSearchData(state,str){
            state.searchData = str;
        }
    }
})

二、input双向数据绑定获取输入内容，同时计算属性获取store数据，然后提交commit修改store里的数据

<input type="text" v-model="searchData" :placeholder= "placeholder" />

    computed: {
            searchData: {
                get () {
                  return this.$store.state.searchData
                },
                set (str) {
                  this.$store.commit('changeDefaultSearchData', str)
                }
            }
        }

三、最后获取到数据并渲染

<i class="iconfont icon-search-hollow"></i>{{defaultSearchDataHandler}}

    computed: {
            defaultSearchDataHandler(){
                return this.$store.state.defaultSearchData
            }
        }

转载于:https://my.oschina.net/parchments/blog/3007533