Vuex的理解使用

Vuex

1、state

1. 直接通过this.$store.state.名称调用

   <template>
     <div class="about">
       <h4>这是about组件：拿到了{{this.$store.state.str}}</h4>
       <button><router-link to="/">home</router-link></button>
     </div>
   </template>
   <script>
   export default {
     name: "about",
   };
   </script>
   

   import Vue from 'vue'
   import Vuex from 'vuex'
   import state from './state'
   import mutations from './mutations'
   import actions from './actions'
   
   Vue.use(Vuex)
   
   export default new Vuex.Store({
     state: state,
     mutations:mutations,
     actions: actions
   })
   
   // export default{
   //     str:'这是state里的数据'
   // }
   

2. mapState辅助函数使用

   state.js

   export default{
       str:'这是state里的数据',
       num1:200,
       word:'saasdadsasdasd'
       }
   

   组件

   <template>
     <div class="home">
       <h4>{{str}}</h4>
       <p>{{num1}}</p>
       <p>{{word}}</p>
       <button><router-link to="about">about</router-link></button>
     </div>
   </template>
   
   <script>
   import {mapState} from 'vuex'
   export default {
     name: "home",
     computed:{
       ...mapState(['str','num1','word'])
        }
    };
    </script>
   

**导入mapState:import {mapState} from 'vuex'**
**展开mapState： ...mapState(['str','num1','word'])**
**直接调用{{str}}**
 
### 2、getters

1. **导入mapGetters：import {mapState,mapGetters} from 'vuex'**

 **展开mapGetters：import   ...mapGetters(['setStr'])**

 **调用{{setStr}}**

 getters.js
 
```js
 export default{
     setStr(state){
         return state.str + '这是通过getters拼接的字符串'
     }
}

<template>
  <div class="home">
    <p>{{setStr}}</p>
    <button><router-link to="about">about</router-link></button>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  name: "home",
  computed:{
    ...mapState(['str','num1','word']),
    ...mapGetters(['setStr'])
  }
};
</script>

========================================================

通常对属性的操作放在computed计算属性中（state,getters)

========================================================

3、mutations

1. 导入mapMutations:import {mapMutations } from “vuex”;

   展开mapMutations: …mapGetters([“setStr”]),

   调用

   <button @click=“btn”>直接调用mutations

   mutations.js

   export default{
       btn(){
           console.log('这是mutations中的btn方法')
       }
   }
   

   组件

   <template>
     <div class="home">
       <p><button @click="btn">直接调用mutations</button></p>
       <button><router-link to="about">about</router-link></button>
     </div>
   </template>
   
   <script>
   import { mapMutations } from "vuex";
   export default {
     name: "home",
     computed: {
     },
     methods: {
       ...mapMutations(["btn"]),
     },
   };
   </script>
   
   

2. 间接调用，调用当前组件中的方法，在当前组件方法中再调用

    <p><button @click="usebtn">间接调用mutations</button></p>
   <script>
   import { mapMutations } from "vuex";
   export default {
     methods: {
       ...mapMutations(["btn"]),
       usebtn(){
          this.btn()
       }
     },
   };
   </script>
   

3. mutations传参数修改state里的属性值

   • 传单个参数值

     mutations.js

     export default{
         btn(state,name){
             state.username = name
         }
     }
     

     state.js

     export default{
         list:[
             {
                 name:'张三'
             },
             {
                 name:'书无可'
             },
             {
                 name:'唐生'
             }
         ],
         username:''
     }
     

       <ul>
           <li v-for="(item, index) in list" :key="index" @click="usebtn(item.name)">
             {{ item.name }}
           </li>
         </ul>
         <hr />
         <p>{{username}}</p>
     <script>
     import { mapState, mapGetters, mapMutations } from "vuex";
     export default {
       name: "home",
       computed: {
         ...mapState(["list",'username']),
       },
       methods: {
         ...mapMutations(["btn"]),
         usebtn(name) {
           this.btn(name);
         },
       },
     };
     </script>
     

   • 传多个参数用传对象的方式

      methods: {
         ...mapMutations(["btn"]),
         usebtn(name) {
           this.btn({
             name,
             a:20
           });
         },
       },
     };
     

     mutations.js

     export default{
         // btn(){
         //     console.log('这是mutations中的btn方法')
         // }
         btn(state,obj){
             state.username = obj.name
             console.log(obj.a)
         }
     }
     

4. 使用this.$store.commit(‘mutations里的方法名’)

    this.$store.commit("btn", {
           name:name,
           a:20
         });
   

=======================================================================================

Mutation 必须是同步函数。一条重要的原则就是要记住 mutation 必须是同步函数。

4、actions

1. actions里通过context.commit()提交一个mutation

   state.js

   export default{
       num:0
   }
   

   moutations.js

   export default{
       addNum(state){
           state.num++
       }
   }
   

   actions.js

   第一种context

   export default{
       addNumFn(context){
           context.commit('addNum')
       }
   }
   

   第二种

   export default{
       addNumFn({commit}){
           commit('addNum')
       }
   }
   

   <template>
     <div class="about">
       <hr />
       <p>num:{{ num }}</p>
       <button @click="addNumber">add</button>
     </div>
   </template>
   <script>
   import { mapState } from "vuex";
   export default {
     name: "about",
     computed: {
       ...mapState(["num"]),
     },
     methods: {
       addNumber() {
         this.$store.dispatch("addNumFn");
       },
     },
   };
   </script>
   

   通过store.dispatch(‘increment’)触发

2. 传参

   moutations.js

   export default{
       addNum(state,obj){
           state.num += obj.number
       }
   }
   

   actions.js

   export default{
       addNumFn(context,obj){
           context.commit('addNum',obj)
       }
   }
   

    methods: {
       ...mapActions(["addNumFn"]),
       addNumber() {
         this.addNumFn({
           a:5
         });
       },
     },