vuex介绍及示例说明

首先我们要明白vuex是什么？

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

• 简单的说：

1. 因为组件之间通信（1.子传父：订阅发布，2.父传子：props，3.兄弟组件传递：事件车）太麻烦。。。。单向数据流的简洁性很容易被破坏。。。。共享的数据最好是统一管理。

vue的单项数据流

image.png

2. 通俗的讲：把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用，其实就是-----定义了一个包含特定概念的全局对象。

状态管理模式

image.png

vuex的一个初始化的方式

const store = new Vuex.Store({
  state: {//单一状态树，所有需要共享的数据放在这里
    count: 2.011
  },
  getters:{ //相当于cumputed属性，对外输出数据的不同形态
    getterName(store,getters){
      return store.count.toFixed(2);
    }
  },
  mutations: {//唯一修改state的方式，和vue中的methods类似
    increment (state，data) {
      state.count+=data.amount
    }
  },
  actions:{//异步处理数据的方式
    incrementAsync ({ commit },data) {//可以执行异步操作
                setTimeout(() => {
                    commit('increment',data)
                }, 1000)
            }
  },
modules: {
            a: moduleA,
        }
})

moduleA :

const moduleA = {
        state: { name:'A' },
        mutations: {  },
        actions: {
            incrementIfOddOnRootSum ({ state, commit, rootState }) {
                console.log(state);//局部状态
                console.log(rootState);//根节点状态
            }
        },
        getters: {
            sumWithRootCount (state, getters, rootState) {
                return state.count + rootState.count;
                console.log(state);//局部状态
                console.log(rootState);//根节点状态
            }
        }
    }

vuex 包含有五个基本的对象：

• state：存储状态（单一状态树）。也就是包含变量的那个对象（vue中需要共享的数据）；

store.state.up //在外部获取状态中的up变量
this.$store.state.up//在vue实例内部获取状态中的up变量

点我看---state举例说明

• getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。
  相当于store中的computed，避免组件多次使用一个数据处理方式时不断粘贴代码。。。

store.getters.getterName()//外部调用getterName方式。
this.$store.getters.getterName()//vue实例内部调用getterName方式

点我看---getters举例说明

• mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。和vue中的methods类似。

外部调用方式：store.commit('increment ', {amount:18})。

点我看---mutations举例说明

• actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。

//外部调用方式：
store.dispatch({
        type: 'incrementAsync',
        amount: 10
    })

点我看---actions举例说明

• modules：store的子模块，内容就相当于是store的一个实例。

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 的state
store.state.b // -> moduleB 的state

一般使用流程

1.action中请求数据，然后调用commit（用async/await同步写法），来执行mutations来改变state的数据。
2.在组件的mounted中执行action，相当于请求了数据
3.组件中用getter获取state中的数据