VueX的五个状态

一、state

定义：相当于组件中的data，用来定义状态，其他状态的设定可以认定为是为了对state进行管理而延申的

特点：响应式

用法：

1.可以直接在组件中this.$store.state.xxx(state变量名)来调用

2.官方推荐使用计算属性(computed)返回，每当变量值变化时，都会重新计算，并触发更新相关DOM

<template>
    <div class="demo">
        {{this.getNumber}}
        {{getNumber}}        
    </div>
</template>

<script>
export default {
    computed:{
        //需以函数方式返回，函数名相当于变量名
        getNumber(){
            return this.$store.state.token
        }
    }
}
</script>

扩展：mapState 辅助函数

使用场景：快捷获取多个状态

<template>
    <div class="demo">
        {{this.getNumber}}
        {{getNumber}}        
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data:{
        return{
            localNumber:10
        }
    }
    computed:mapState({
        //当命名与VueX中的命名相同时也可以直接获取
        "number"        

        //getItem相当于变量名，number相当于this.$store.state.number
        getItem:"number"

        //也可并入局部状态，但是必须使用常规函数
        countPlusLocalState (state) {
          return state.number + this.localNumber
        }
    }),
}
</script>

二、getter

定义：过滤作用

用法：

1.可以直接在组件中过滤

computed: {
  listName(){
    return this.$store.state.list.filter(item => item.name)
  }
}

2.如果多个组件都使用到此属性时，可以定义在VueX文件中

//store.js(Vuex)
const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    //无传参
    doneTodos: (state) => {
      return state.todos.filter(todo => todo.done)
    }

    getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
    }
  }
})



//demo.vue，调用
    //无传参
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodos
  }
}

    //传参
store.getters.getTodoById(2)

三、Mutation

作用：更改状态

特点：必须是同步操作，当mutation被触发时，回调还没有调用，

用法：在VueX中定义mutations函数，函数的第一个参数是state，也可以传值作为第二个参数，传值一般为对象

//store.js
mutations: {
  increment (state, n) {
    state.count += n
  }
}

//demo.vue
store.commit('increment', 10)

扩展：快捷方式提交

//demo.vue
//引入mapMutations 
import { mapMutations } from 'vuex'


export default {
  methods: {
    ...mapMutations([
      'increment',         // `this.$store.commit('increment')`

      'incrementBy()'     // this.$store.commit('incrementBy', amount)
    ]),

    ...mapMutations({
      add: 'increment'     //将此映射给局部状态
    })
  }
}

四、Action

作用：异步操作的处理

特点：action提交的是到mutation，而不是直接修改