Vuex的存储和取值
vuex的基本使用
·
目录
1.1在main.js中
import store from './store'
new Vue({
router,
store,
created: bootstrap,
render: h => h(App)
}).$mount('#app')
1.2 src目录下新建store文件夹
在index.js中,state中定义数据,你想保存什么样的数据,就定义成什么样。比如空字符串或者对象,因为我需要保存的是一个数组,所以我这里定义了一个空数组,mutations中操作state的数据,mutations中定义一个更新数据的方法,第一个参数必须是state,第二个参数是接受的参数。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
saveAllList:[]
},
mutations: {
updateData(state,data){
state.saveAllList = data
}
},
actions: {
},
getters
})
1.3 去要保存数据的页面
通过‘this.$store.commit(‘在vuex的mutation中定义的方法名’,这个页面上我们要保存的数据) ’获取数据
data() {
return {
saveAllList: [], //批量保存数组
})
//失去输入框焦点
inputonBlur(e) {
if (!e.target.value.trim()) return // 优化防止没输入内容也调接口
this.saveAllList.push({
fPkDataId: this.fPkDataId,
fVcContent: e.target.value
})
//我在这个事件里获取到 this.saveAllList,调用this.$store.commit把数据存入vuex中
this.$store.commit('updateData', this.saveAllList)
},
1.4 vuex存储数据后
在需要使用的页面调用数据,首先在data中定义一个空数组,还是叫同一个名。
data() {
return {
saveAllList: [], //批量保存数组
})
1.5 在created中赋值
created() {
this.saveAllList = this.$store.state.saveAllList
},
更多推荐
已为社区贡献2条内容
所有评论(0)