Vuex知识点总结

VueX的使用

1.安装vuex的依赖包

npm install vuex --save

2.导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3.创建store对象

export default new Vuex.Store({
  state: {     
     count:0 
   },
）

4.将store对象挂载到Vue实例中

new Vue({ 
 router,  
 store,  
 render: h => h(App)
})$mount('#app')

Vuex中的主要核心概念如下：

1.state
2.mutations
3.actions
4.getters

(一)state

state提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中进行存储

创建数据源：
export default new Vuex.Store({ 
 state: {        
     count:0 
  },
）

组件访问state中数据的方式一：

<h3>当前最新的count值为:{{$store.state.count}}</h3>//this可省略

组件访问state中数据的方式二：

//导入state
import { mapState } from "vuex";
//将全局数据，映射为当前的计算的属性
 computed: {   
   ...mapState(["count"]), 
 },
  //直接引用
 <h3>当前最新的count值为:{{count}}</h3>

(二)mutations

mutations用于变更Store的数据，也就是修改state中定义的数据源。
注意：
①只能通过mutations变更Store的数据，不可以直接操作Store中的数据
②通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

mutations变更Store的数据方式一：

//定义mutations
export default new Vuex.Store({ 
 state: {    
     count:0 
 },  
  mutations: {  
    add(state){  
        //变更    
        state.count++ 
    },    
},

//触发mutations
 methods: {    
    sum() {      
       //触发mutations的第一种方式    
       this.$store.commit("add");   
    },
 }


//定义mutations传参
mutations: {    		
    add(state){          
       state.count++ 
    },    
    //传参   
    addN(state,step){   
          state.count+=step;  
    },
}
//触发mutations时传参
 methods: {    
      sum() {      
            this.$store.commit("add");  
      },   
      sumN() {     
           //传参     
            this.$store.commit("addN",3);  
      },
}

mutations变更Store的数据方式二：

//导入mutations
 import { mapMutations} from "vuex"；

 //通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法
methods: {       
   ...mapMutations(["add", "addN"]),    
    sum() {     
       this.add();  
    },  
    sumN() {      
        this.addN(2); 
   },
 }

注意：不要在mutation函数中执行异步操作

(三)Action

Action用于处理异步任务
如果通过异步操作变更数据，必须通过Action，而不能使用mutation，但是在Action中还是要通过触发mutation的方式间接变更数据

Action处理异步任务一：

//定义actions
 mutations: {    
     add(state){     
        //变更      
        state.count++   
     },  
     //传参   
     addN(state,step){    
        state.count+=step; 
     },
},  
//用于处理异步任务，如果通过异步操作变更数据，必须Action，而不能使用Mutation  
 actions: {   
       addAsync(context){    
            setTimeout(()=>{      
                //在actions中，不能直接修改state中的数据;      
                //必须通过context.commit()触发mutation中的某个方法     
                context.commit('add')    
            },1000) 
       },   
       //携带参数
       addAsyncN(context,step){   
            setTimeout(()=>{        
                context.commit('addN',3) 
            },1000)   
       }, 
  },

//触发actions
 methods: {       
     //异步地让count自增+1    
     sumAction(){        
         //这里的dispatch函数，专门用来触发action       
         this.$store.dispatch('addAsync')  
     },   
     sumActionN(){    
            this.$store.dispatch('addAsyncN')   
     }
 },

Action处理异步任务二：

//导入mapActions
 import { mapActions} from "vuex"；
  //通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法
methods: {       
    ...mapActions(["addAsync","addAsyncN"]),
    sum() {     
       this.addAsync();  
    },  
    //传参
    sumN() {      
        this.addAsyncN(2); 
    },
 }

(四)Getter

①Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
②Store中数据发生变化，Getter的数据也会跟着变化

Getter加工Store数据的方式：

//定义Getter
getters:{   
   showNum(state){    
       return '当前最新的count值'+ state.count +' '    
   }
},

//使用方式一
<h3>{{this.$store.getters.showNum}}</h3>

//使用方式二
//导入mapGetters
import { mapGetters} from "vuex"；
 
computed: {   
      ...mapGetters(["showNum"])
},

如果这篇文章对您有帮助，还请点个赞！！！