Vue核心概念(state,getters,mutations)简单应用实例

state

首先在store.js种定义几个简单的state

// store/index.js
const state = {
    name:"admin",
    token: "123345",
    avatar: "fdjkhkfs",
    students: [
        {id:0, name: 'Cherry MX Blue', inClass: true, score:45},
        {id:1, name: 'Glorious Panda', inClass: false, score:61},
        {id:2, name: 'SP-STAR Nana', inClass: true, score:90},
    ]
}

1. 在组件中使用this.$store.state访问

<!-- component -->
<h1>{{ this.$store.state.name }}</h1>
<h1>{{ this.$store.state.token }}</h1>
<h1>{{ this.$store.state.avatar }}</h1>

2. 使用mapState简化state的访问

<h1>{{ name }}</h1>
<h1>{{ token }}</h1>
<h1>{{ avatar }}</h1>
……………………
import {mapState} from 'vuex'
computed:{
    ...mapState(['name', 'token', 'avatar']),
    // 使用别名  ...mapState({alia1:'name', alia2:'token', alia3:'avatar'}),
  },

getters

首先在store/index.js定义四个getters，包含三个不带参数的getters和一个带参数的getters

const getters = {
    getName: (state) => { // 获取name
        return state.name;
    },
    getToken: (state) => { // 获取token
        return state.token;
    },
    getAvatar: (state) => { // 获取avatar
        return state.avatar; 
    },
    filterScore:  (state) => (score) => { // 获取students中高于score的记录
        return state.students.filter(student => student.score>=score);
    }
}

1. 在组件中使用this.$store.getters访问

<h1>{{ this.$store.getters.getName }}</h1>
<h1>{{ this.$store.getters.getToken }}</h1>
<h1>{{ this.$store.getters.getAvatar }}</h1>

2. 使用mapGetters简化getters的访问

<h1>{{ getName }}</h1>
<h1>{{ getToken }}</h1>
<h1>{{ getAvatar }}</h1>
……………………
import {mapState, mapGetters} from 'vuex'
computed:{
    ...mapGetters(["getName", "getToken", "getAvatar"]),
  },

3. 带参数Getters使用

<button @click="test()">test</button>
……………………………………
import {mapState, mapGetters} from 'vuex'
computed:{
    ...mapGetters(["filterScore"]),
  },
method:{
	test(){
      console.log(this.filterScore(60)); // 或者使用this.$store.getters.filterScore(60);
    }
}

Mutations

首先在store/index.js定义三个mutations

const mutations = {
    updateName: (state, name) => { // 更新name
        state.name = name;
    },
    updateToken: (state, token) => { // 更新token
        state.token = token;
    },
    updateAvatar: (state, avatar) => { // 更新avatar
        state.avatar = avatar;
    }
}

前端测试组件如下所示，三个h1标签用于显示当前的三个不同的state，三个输入框用于修改state，button按钮触发修改事件。

<h1>{{ getName }}</h1>
<h1>{{ getToken }}</h1>
<h1>{{ getAvatar }}</h1>
<input v-model="name1" /><br>
<input v-model="token1" /><br>
<input v-model="avatar1" /><br>
<button @click="test()">test</button>

1. 在组件中使用this.$store.commit访问

data(){
    return{
      name1: "",
      token1: "",
      avatar1: "",
    }
  },
methods:{
    test(){
      if (this.name1 !== ""){ // name输入框不为空则将name状态设定为输入框的值
        this.$store.commit("updateName", this.name1);
      }
      if (this.token1 !== ""){ // 同理
        this.$store.commit("updateToken", this.token1);
      }
      if (this.avatar1 !== ""){ // 同理
        this.$store.commit("updateAvatar", this.avatar1);
      }
    }
  }

2. 使用mapMutations简化getters的访问

data(){
    return{
      name1: "",
      token1: "",
      avatar1: "",
    }
  },
methods:{
	...mapMutations(["updateName", "updateToken", "updateAvatar"]),
    test(){
      if (this.name1 !== ""){
        this.updateName(this.name1);
      }
      if (this.token1 !== ""){
        this.updateToken(this.token1);
      }
      if (this.avatar1 !== ""){
        this.updateAvatar(this.avatar1);
      }
    }
  }