vuex的使用

最新推荐文章于 2024-10-23 13:40:03 发布

原创最新推荐文章于 2024-10-23 13:40:03 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

vue成长之路专栏收录该内容

28 篇文章

订阅专栏

一、下载

npm install --save

二、引入(在main.js中操作)

import Vue from 'Vue'
import Vuex from 'Vuex'
import Vuex from 'Vuex'

三、注册（在main.js中操作）

Vue.use(Vuex)

四、使用

1.state属性的使用（一般用于保存初始化状态）
   eg: 
      const store = new Vuex.Store({  
            state: {    
                   count: 0 
                   userId: 0 
                   }
                })

2.mutation属性的使用（更改state中的数据只能通过mutations属性）
   eg: 
      const store = new Vuex.Store({  
            state: {    
                   count: 0 
                   userId: 0 
                   }
            mutations:{
                  AllCount(state,payload){ //state指向初始化状态
                    state.count++;
                     },
                  userId(state,payload){
                    state.userId+=1; 
                    payload.id=10; //payload指向传入的参数
                     }
                  }
           })

3.action属性的使用（便于管理/维护，使用action管理mutation）
   eg: 
      
 const store = new Vuex.Store({  
            state: {    
                   count: 0 
                   userId: 0 
                   },
            mutations:{
                  AllCount(state,payload){ //state指向初始化状态
                     state.count++;
                      },
                  userId(state,payload){
                     state.userId+=1; 
                     payload.id=10; //payload指向传入的参数
                      }
                     },
                  actions:{
                     AllCount(context){
                     context.commit(' AllCount ')
                     }
                   }
                })