浅谈vuex的基础使用

vuex的四个属性

state:数据
mutations:修改数据（方法）常用于同步方法
actions：给组件派发动作（执行方法）常用于处理异步操作
getters:将state中的数据批量导出，可以得到计算属性

state:------存放数据

state:{
name:'张三',
age:20
},

 

mutations:-----修改数据

mutations:{
// state:默认第一个参数指的就是当前store中的state 不可修改
changeName(state){
state.name = '李四'
},
changeAge(state){
state.age='15'
},
changeN(state,name){
state.name = name;
}
},

actions:-------接收组件的动作，处理的是异步操作

 actions:{
        // context  指的就是当前所在的仓库store
         name(context){
          setTimeout(() => {
            context.commit('changeName')            
          }, 1000);
         },
         alert(context){
           alert(123)
         }
      },

getters:-------导出状态给组件

     getters:{
        // state   初始数据
          myname(state){
              return state.name
          },
          myage(state){
            return state.age
          },
          say(state){
            return `我叫${state.name},今年${state.age}岁了`
          }
      }