vue核心组件：
网络通信（axios）
页面跳转（router）
状态管理（vuex）
存：四种方法 项目中使用四种方法使用vuex存值
//1.1解释：第1种方法第1步
data(){
sum1:0,
sum2:0,
sum3:0,
sum4:0,
},
methods: {
onSubmit() {
// 1.1第一种方法第一步同步存
this.$store.commit("sum1", sum1)
// 2.1异步存
this.$store.dispatch("sum2", sum2)
// 3.1同步存，map
this.sum3(sum)
// 4.1同步存，map
this.sum4(sum)
})
},
// 3.2同步存，map
...mapMutations(['sum3']),
// 4.2异步存，map
...mapActions( ['sum4']),
}
store文件内的js就是存放vuex的位置
// vuex使用场景：项目中的token个人信息，多个组件公用的数据存放，解决路由组件传值的复杂过程
export default new Vuex.Store({
// state:数据存放地方，可以存放数组，对象，kv对
state: {
sum1:0,
sum2:0,
sum3:0,
sum4:0,
},
// getters:指的是获取state中的值，获取的方式
getters: {
showtoken(state){
return state.某个值
}
},
// 同步存，组件中调用什么k，这里就写什么k
// mutations:英语->变异，改变，改变state中的值，同步的
mutations: {
// 1个参数叫做 上面的state,2个参数是组件传来的值；如果项目使用同步，直接调这个方法，改变vuex数据仓库内的值
//3.3，4.4
fn(state,value){
state.某个值=value
},
},
// 异步存
// actions:行为，做出改变的行为，让mutations同步去改变
actions: {
// 第一个参数联系上下文； 2.传过来的值；如果项目中用异步存值调这个方法，这个方法在转mutations内对应的方法
//4.3
fn1(context,value){
context.commit('fn', value)
},
},
modules: {
}
})
取:四种方法 export default new Vuex.Store({
// state:数据存放地方，可以存放数组，对象，kv对
state: {
sum1:0,
sum2:0,
sum3:0,
sum4:0,
},
// getters:指的是获取state中的值，获取的方式
getters: {
//2.2,4.3
sum2(state){
return state.某个值
}
},
map计算属性：
import { mapGetters ,mapState} from 'vuex'
export default {
computed:{
//3.2
...mapState(['sum3']),
//4.2
...mapGetters(['sum2'])//提倡用这种
}
}
推荐文章
发表评论