版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/x7418520/article/details/84064418
一个简单的例子
在vue项目中使用vuex
首先需要先了解vuex中的store,然后在store中又有state,getter,action,mutation这几个参数。
如何安装vuex
,请查看vue官网安装vuex
下面演示一个简单的使用vuex
的实例。
首先在state
中,定义一个参数:
const state = {
id: null,
}
我们按照习惯来写,新建一个mutation-type.js
文件,里面存放,
export const SAVE_ID = 'SAVE_ID'
在mutaions中,定义方法:
import {RECORD_ADDRESS,} from './mutation-types.js'
[SAVE_ID](state, id) {
state.id = id;
},
现在就是保存store
中的id
值了
在需要的地方使用mapMutations
辅助函数,映射为store.commit
调用。
在这里需要注意一点,需要从vuex
中引入这个辅助函数。
import {mapMutations} from 'vuex'
methods: {
...mapMutations([
'SAVE_ID',
]),##这个函数建议放在methods中
}
然后在方法中调用,即可保存:
this.SAVE_PAPERID(this.id);
这时候已经可以使用$store.state.id
,获取到id的值了,但是我又发现了一个问题,当页面刷新的时候,store中的值就消失了,这时查到解决方法。
将数据存放到localStorage
中。
只需要在mutation
中加入:
[SAVE_ID](state, id) {
state.id = id;
window.localStorage.setItem('SAVE_ID', state.id);
},
在获取数据的时候在加入一个判断:
computed: {
id() {
let localData = window.localStorage.getItem('SAVE_ID');
if(this.$store.state.id==null && localData) {
this.SAVE_ID(localData);
}
return this.$store.state.id;
}
}
完成
参考博客: