博客

vue核心组件：

网络通信（axios）

页面跳转（router）

状态管理（vuex）

1. 存：四种方法

   项目中使用四种方法使用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: {
     }
   })
   

2. 取:四种方法

   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.某个值
       }
     },
   

   <div> 1.1:{{this.$store.state.sum1}} </div>
   <div> 2.1:{{this.$store.getters.sum2}}  </div>
   map计算属性：
   <div> 3.1:{{token}} </div>
   <div> 4.1:{{showtoken} </div>
   import { mapGetters ,mapState} from 'vuex'
   export default {
       computed:{
   		//3.2
           ...mapState(['sum3']),
   		//4.2
           ...mapGetters(['sum2'])//提倡用这种
       }
   }
   </script>