vuex的使用-简单存储

在写新项目的时候，用input自己写了个搜索框，搜索之后获取到点击的数据，要将数据在tab中渲染出来，思前想后，觉得vuex是最好的解决办法，记录一下vuex的基本用法

首先是在store文件夹的modules创建一个js文件用于存放vuex文件（别忘了在getters.js文件里暴露）

vuex的五大属性State、 Getter、Mutations、Action、 Modules

不过其实在开发中，有state和mutations就可以写一个vuex文件了（所以我单纯的存储数据，就只用了这俩）

filter.js

const state = {

  click: {

    clickData: ''

  }

}

const mutations = {

  CLICK_CHANGE: (state, click) => {

    state.click = click

  }

}

export default {

  namespaced: true,

  state,

  mutations

}

在写入数据时，使用commit（也就是在你需要进行数据存储的地方写入）

 

此处我是想把接收到的item传入vuex进行存储，commit的第一个参数是“文件名/mutations方法名”的意思

在使用数据时，先引入mapState

import { mapState } from 'vuex'

在计算属性中使用它，就像

这时候你就可以通过this.filter使用接收到的vuex数据了