VueX详解 - 码农教程

vuex是什么?

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

简单来说 : vuex 是 Vue 配套的公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据；

vuex使用步骤:

1. npm安装,引入并在Vue上挂载VueX

命令: npm install vuex --save

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

//main.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

2.创建store,把store理解成VueX的一个整体配置对象(核心),所有的VueX有关的配置,如state,getter,action等都在store里配置

vue数据流图:

核心概念1: State 把state理解成VueX中的公共状态,可以理解成所有组件公用的data,用于保存公共的数据

const store = new Vuex.Store({
  state:{
    products:[
      {name:'苹果',price:6},
      {name:'草莓',price:10},
      {name:'火龙果',price:4},
      {name:'芒果',price:12.5},
      {name:'橘子',price:3.9}
    ],
  },
});

核心概念2: Getters 我们就将getters当做store的计算属性,这样既不需要在每个需要该计算属性的组件里重复复制,也不需要单独将其抽离出来,还能保证在每个组件内都能使用

const store = new Vuex.Store({
  getters:{
    saleProducts:(state)=>{
      return state.products.map(p=>{
        return {
          name:p.name,
          price:p.price/2
        }
      })
    }
  },
});

核心概念3: Actions Action 类似于 mutation，不同在于： 1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

//mutation
const store = new Vuex.Store({
 mutations:{
    riseInPrice(state,payload){
      state.products.forEach(p=>{
        p.price-=payload;
      })
    },
  },
});

//Actions
const store = new Vuex.Store({
 actions:{
    //Action 函数不是直接变更状态,所以他没有state参数
    riseInPriceAsync(context,payload){
      //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
      setTimeout(()=>{
        context.commit('riseInPrice',payload);
      },2000)
    }
  }
});

核心概念4: Module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

3. 在vue实例里注册store

//main.js文件
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
});

参考vue官网: https://vuex.vuejs.org/zh/