用vuex保存搜索记录

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

2.新建store.js文件

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

test:[]

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

　　只有 mutation 能动 State，mutations里面是一个一个的方法，参数第一个就是state 参数最好是一个对象

　　可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名

　　mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等

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

5.在getter中获取数据

　　可以对state中的成员加工后传递给外界

　　Getters中的方法有两个默认参数

• state 当前VueX对象中的状态对象
• getters 当前getters对象，用于将getters下的其他getter拿来用

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

6.在action中保存搜索记录

　　由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

　　Actions中的方法有两个默认参数

• context 上下文(相当于箭头函数中的this)对象
• payload 挂载参数

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;
},