基本使用

1.vuex的基本结构

• state

  类似vue中的 data 主要用来保存变量,值改变需要调用 mutations 里面的方法进行改变。 ```javascript const state = { name: ‘张三’, };

// 正确做法 const mutations={ SET_NAME(state,val){ state.name=val } }

// 错误做法 this.$store.state.name=”李四”;//这种方法只能用来获取值,不能写入值

- mutations
  类似vue中的 `methods` 方法,主要用来操作 `state` 里面的数据,接收的第一个参数默认为 `state` ,**! **注意任何需要改变 `state` 里面值的操作都要经过 `mutations` 
```javascript
const state = {
  name: '张三',
};
//设置
const mutations={
    SET_NAME(state,val){
      state.name=val
  }
}
// 调用
this.$store.commit("SET_NAME",'李四')

为了便于阅读, mutations 里面的方法名最好用 set get 名开头,且全大写

• actions

actions 主要用来异步操作的,例如请求后台接口返回的数据,调用返回的结果一般是使用 mutations 里面的方法进行储存到 state 里面的

const state = {
  name: '张三',
};
//设置
const mutations={
    SET_NAME(state,val){
      state.name=val
  }
}
const actions={
    getName({commit,state},data){
    axios.get("www.123456.com",data).then(res=>{
            commit("SET_NAME",res.data);      
    })
  }
}
// 调用
this.$store.dispach("getName",data);

• getter

  2. 方法映射

  vuex的方法映射是一个语法糖,了解语法后可以使代码可读性更好,使用更方便 ```javascript // store.js

export default Vuex.Store({ state:{ name:””, }, mutations:{ SET_MAME(state,name){ state.name=name } }, actions:{ getName({commit},data){ axios.get(“www/baidu.com”,data).then(res=>{ commit(“SET_MAME”) } } } });

//index.vue import { mapMutations,mapActions } from ‘vuex’; export default{ data(){ return {

}
},
 methods:{
  ...mapActions([
    getName, // 映射出getName
]),
handleName(){
    this.getName({user:1,role:2});// 使用映射的getName相当于this.$store.commit("getName") 
}

}
} ```