组件上的引入:
import { mapState, mapMutations } from "vuex";
mapState使用有两种方式,如下
computed: {
lang_() {
return this.$store.state.loginInfo.lang; //附带上store的直接使用方式
},
//下述中的 ... 是拓展运算符
// 使用 [] 是解构赋值
...mapState({
lang: state => state.loginInfo.lang //这是mapState的使用方式
})
//需要进一步处理的话,用下面方式写
...mapState({
infoObj: state => {
let info = state.accountInfo.infoObj;
return self.formSexToStr(info);
}
}),
},
mapActions和mapMutations使用方式都是一样的,如下,放到methods中
methods: {
...mapMutations(["SETLOGINSTATE", "setUserInfo"]),
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
使用栗子,
先是放入localStorage,后执行store里面定义的方法,从而改变state
//方法中要是有先存储,就不用这里
localStorage.setItem("infoObj", JSON.stringify(this.form));
//存放到store
this.setUserInfo({ infoObj: this.form });
--by Affandi ⊙▽⊙
