用vuex保存搜索记录

Posted 2020-12-16 lilililiwang

1.安装vuex 并在main.js中引用

2.新建store.js文件

3.在 state 中定义需要保存的状态

test:[]

4.在mutations中写保存记录的函数

SAVE_TEST_STA:function (state, test) {
  state.test.push(test)
},

5.在getter中获取数据

getTest: function (state) {
  return state.test;
},

6.在action中保存搜索记录

saveTest({commit},sta){
  commit(‘SAVE_TEST_STA‘, sta)
},

7.在页面中增加输入框和两个按钮

<input type="search" placeholder="请输入" class="search_input" v-model="testNum">
<button type="submit" class="search_submit" @click="test">设置</button>
<button @click="testBtn">获取</button>{{testList}}

8.在data中定义关键字和需要展示的历史记录

testNum:"",
testList:[],

9.在methods中记录输入框输入的内容（设置按钮的test事件）

test(){
  this.$store.dispatch(‘saveTest‘, this.testNum);
},

10.在methods中保存得到的搜索记录（获取按钮的testBtn事件）

testBtn(){
  this.testList = this.$store.getters.getTest;
},