vuex详解

vuex的介绍

vuex是vue.js应用程序中的状态管理模式，它是集中式存储管理所有组件的数据状态，vuex解决了多个视图之间的数据交互同步，不需要进行组件连接再传递数据。

vuex的5大模块

state：用于数据的存储，是store中的唯一数据源

const state = {
  // 初始化两个组件的数据源，用于操作
  A: '',
  B: ''
}复制代码

getters：是一种计算属性，对state数据进行操作，常用于数据的筛选和多个数据的相关性计算

//定义
getters: {
    filteredList: state => {
      return state.list.filter(item => item > 5)
    }
}
//调用
this.$store.getters.filteredList;复制代码

mutations：是一种函数集合的对象，用于在里面改变state数据，但不能用于处理异步事件

const mutations = {
  receiveA(state, datas) {
    // 接收A的数据存放于state
    state.A = datas.A
  },
  receiveB(state, datas) {
    // 接收B的数据存放于state
    state.B = datas.B
  }
}
//调用mutations的方法，用commit触发
this.$store.commit('receiveA', {
  A: '我是A'
})复制代码

actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作

const actions = {
    setNum(content){ //复制的一份store
      return new Promise((resolve)=>{//异步操作
        setTimeout(()=>{
          console.log('改变状态')
          resolve()
       },1000)
     })
   }
}
//调用actions，用dispatch触发
this.$store.dispatch('setNum')
//actions使用dispatch进行触发，就像mutation使用commit触发一样复制代码

modules：vuex中的命名空间，便于维护项目中将各个模块的状态分开定义和操作

vuex示例代码：

const store = new Vuex.Store({
  state:{
      // 初始化两个组件的数据源，用于操作
      A: '',
      B: ''
  },
  getters: {
    filteredList: state => {
      return state.list.filter(item => item > 5)//过滤小于5的值
    }
  },
  mutations:{
      receiveA(state, datas) {
          // 接收A的数据存放于state
          state.A = datas.A
      },
      receiveB(state, datas) {
         // 接收B的数据存放于state
         state.B = datas.B
      }
  },
  actions:{
    setNum(content){ //复制的一份store
      return new Promise((resolve)=>{//异步操作
        setTimeout(()=>{
          console.log('进行改变状态操作')
          resolve()
       },1000)
     })
   }
  }
})复制代码

vuex运用场景

1. 页面与页面之间产生各种公共变量。

2. 页面头部组件下，购物数量显示。

3. 全局变量也可以用vuex来存储。