状态管理Vuex

收藏

概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我们到底什么时候使用Vuex？如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。您的应用够简单，您最好不要使用 Vuex，它适合在大型前端应用中由于多处组件公用数据源的场景

1、安装

npm install --save vuex

2、新建一个store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  //共享状态
  state: {
    count: 0,
    list:null
  },
  getters:{
    取前三个数据
    listFilter(state){
      return state.list.filter((item,index)=>index<3)
    }
  }
  mutations: {
  //唯一修改状态地方(可以监控)
    updateCount (state,data) {
      state.count=data
    },
    increment(state,data) {
      state.list=data
    }
  }，
  actions: {
    //异步处理
    getList (store) {
      axios({}).then(res=>{
          store.commit('increment',res.data)
      })
    }
  }
})

3、在main.js引入

import store from './store'

new Vue({
  el: '#app',
  store
})

获取状态

this.$store.state.count

修改状态

this.$store.commit(updateCount,10)

调用异步处理

this.$store.dispatch("getList")