JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Vuex详解

2019. 06. 20    

关于VueX详解

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  },
  getters: {
  },  
  modules: {
    
  }
})
export default store

state：state定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。

代码样式：

state:{
projects:[],
userInfo:{}
}

state数据结构处理好以后，需要调用。那么该用什么来调用呢。想想后端从前端拿到了数据，总要做个处理吧，处理完了再存到数据库中，这就用到了action。它是定义提交触发更改信息的描述，在数据获取完成后会调用store.commit()来调用更改Store中的状态

actions：Actions就是从服务器端获取数据，在数据获取完成后会调用store.commit()来调用更改Store中的状态。

//备注：SET_PROJECT_LIST是mutations自定义的变量。store.commit只是提交一个 mutation，commit('参数1','参数2')。其中，参数1就不说了，参数2就是为参数1赋值。

actions: {
  LOAD_PROJECT_LIST: function ({ commit }) {
    axios.get('API接口').then((response) => {
      commit('SET_PROJECT_LIST', { list: response.data })
    }, (err) => {
      console.log(err)
    })
  }
}

mutations: 调用 mutations是唯一允许更新应用状态的地方，代码如下：

/*备注：state是上面定义的数据结构，projects是state定义的变量，如上所示。
SET_PROJECT_LIST是mutations自定义变量。
state.projects = list。意思就是把{list}值赋给state.projects;
*/

export const SET_PROJECT_LIST = 'SET_PROJECT_LIST'; //定义变量
mutations: {
  SET_PROJECT_LIST: (state, { list }) => {
    state.projects = list
  }
}

getters: Getters 允许组件从 Store 中获取数据，譬如我们可以从Store 中的 projectList 中筛选出已完成的项目列表：

getters: {
  completedProjects: state => {
    return state.projects.filter(project => project.completed).length
  }
}

modules允许将当个store拆分成多个store，每个模块拥有自己的 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 的状态

来源简书 →陈楠酒肆

# Vue