vue中vuex使用详解

基本概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
以下是一个表示“单向数据流”理念的极简示意：

1. state，驱动应用数据源
2. View，以声明的方式将state映射到视图
3. Actions，响应在view上的用户输入导致的状态变化

当我们的应用遇到多个组件共享状态时
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如何使用

1. 安装

npm install vuex --save

文件夹结构如下（自己手动创建就可以）

2. 在actions.js文件中写入

const actions = {
  setName({
    commit
  }, data) {
    commit('setName', data)
  }
}
export default actions

3. getters.js

const {
  default: state
} = require("./states");

const getters = {
  getName: state => state.name
}
export default getters

4. mutations.js文件

const mutations = {
  setName(state, data) {
    state.name = data
  }
}
export default mutations

4. states.js文件

const state = {
  name: 'Test Name'
}
export default state

5. store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import state from './states.js'
import mutations from './mutations.js'
import getters from './getters.js'
import actions from './actions'

Vue.use(Vuex)
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

6. 最后在main.js中引入

import store from './store/store'

7. 在vue中载入

new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

8. 在页面中使用

this.$store.state.name
this.$store.getters.getName
this.$store.commit(“setName”,data)
this.$store.dispatch(“setName”,data)