当前位置： 移动技术网 > IT编程>网页制作>CSS > Vuex——基本使用

Vuex——基本使用

2018年11月29日  | 移动技术网IT编程  | 我要评论

vuex——基本使用

npm i vuex -s

2.vue的基本使用流程

一.新建store的js文件

1.引入模块

import vuex from 'vuex'

2.注册模块

import vue from 'vue'
vue.use(vuex)

3. 声明实例并且返回实例

export default new vuex.store({
  state: {
    count: 0
  },
}

4.设置改变状态的方法

export default new vuex.store({
  state: {
    count: 0
  },
  mutations: {
    set_count (state, num) {
      state.count = num
    }
  }
}

二、main.js文件

1.引入实例

import store from './common/js/store'

2.注册实例(全局使用)

// 方法一
vue.prototype.$store = store

// 方法二

/* eslint-disable no-new */
new vue({
  el: '#app',
  router,
  store,
  components: { app },
  template: ''
})

三、*vue文件

1.使用计算属性实时监听调用实例的状态

 computed: {
    count () {
      return this.$store.state.count
    },
}

2.在mounted中调用改变状态的方法

mounted () {
  let i = 1
  setinterval (() => {
     this.$store.commit('set_count', i++)
  }, 1000)
}

3. 调用count计算属性,测试是否成功



{{count}}



                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网