Vuex 全局状态数据管理

一、安装、使用 vuex

• vue.js 2.0 开发环境中安装 vuex

npm install vuex --save

• 创建 store 文件夹和 index.js 文件

  
  vuex 目录结构

// main.js 
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

// store/index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);

export default new vuex.Store({
  // 负责存储状态
  state: {
  },
  // getters 和 vue 中的 computed 类似 , 用来计算 state 然后生成新的数据 ( 状态 ) 
  getters: {

  },
  // 负责同步更新状态
  mutations: {

  },
  // 负责获取,处理数据（如果有异步操作必须在 action 处理，再 mutation）
  actions: {

  },
  // 分模块管理全局数据
  modules: {

  }
})

二、state

• state 存储状态

// store/index.js
 state: {
    num: 1
  }

// App.vue
 <h1>{{$store.state.num}}</h1>

• mapState 辅助函数，当一个组件需要获取多个状态的时候，为了减少状态声明为计算属性会的重复和冗余

// store/index.js
state: {
    num: 1,
    name: 'zs'
  },

// App.vue
// html 
  <h1>{{num}}</h1>
  <h1>{{name}}</h1>
// js
  import { mapState } from 'vuex'
  computed: mapState([
    // 映射 this.num 为 store.state.num
    'num', 'name'
  ]),

二、getters

• 计算 state 然后生成新的数据 ( 状态 ) ，同时也会修改 state 的值

// store/index.js
  state: {
    num: 1
  },
  getters: {
    newNum(state) {
      return state.num = 100;
    }
  }

// App.vue
    <h1>{{ $store.state.num }}</h1>
    <h1>{{ $store.getters.newNum }}</h1>

• mapGetters 辅助函数，作用类似 mapState

// store/index.js
state: {
    num: 1,
    name: 'zs'
  },
getters: {
    newNum(state) {
      return state.num = 100;
    },
    newName(state) {
      return state.name = 'ls';
    }
  },

// App.vue
// html 
  <h1>{{ newNum }}</h1>
  <h1>{{ newName }}</h1>
// js
  import { mapGetters } from 'vuex'
  computed: mapGetters([
    // 映射 this.newNum 为 store.getters.newNum
    'newNum', 'newName'
  ]),

四、mutations

• mutations 同步更新状态，同步事务
• mutations 优先于 getters 执行

// store/index.js
state: {
    num: 1
  },
  mutations: {
   changeNum(state, n) {
      state.num += n
    }
  }

// App.vue
// html
 <h1>{{$store.state.num}}</h1>

// js
  created() {
    this.changeNum()
  },
  methods: {
    changeNum() {
      this.$store.commit('changeNum', 10)
    }
  }

• mapMutations 映射 this.$store.commit

// store/index.js
  state: {
    num: 1,
  },
  mutations: {
    changeNum(state) {
      state.num++
    }
  }

// App.vue
// html
 <h1>{{$store.state.num}}</h1>

// js
  import { mapMutations } from 'vuex'
  created() {
    this.changeNum()
  },
  methods: {
    ...mapMutations([
      'changeNum' // 将 this.changNum() 映射为 this.$store.commit('changNum')
    ])
  }

五、actions

• actions 获取、处理数据，通过 mutations 变更状态
• 可以包含任意异步操作

// store/index.js
  state: {
    num: 1,
  },
  mutations: {
    changeNum(state,n) {
      state.num+=n
    }
  },
  actions: {
    changeNumActions(context) {
      setTimeout(() => {
        context.commit('changeNum',n)
      }, 1000)
    }
  }

// App.vue
// html
 <h1>{{$store.state.num}}</h1>

// js
  created() {
    this.changeNumActions()
  },
  methods: {
    changeNumActions() {
      this.$store.dispatch('changeNumActions',10)
    }
  }

• mapActions 映射 this.$store.dispatch

// store/index.js
  state: {
    num: 1,
  },
  mutations: {
    changeNum(state) {
      state.num++
    }
  },
  actions: {
    changeNumActions(context) {
      setTimeout(() => {
        context.commit('changeNum')
      }, 1000)
    }
  }

// App.vue
// html
 <h1>{{$store.state.num}}</h1>

// js
  import { mapActions } from 'vuex'
  created() {
    this.changeNumActions()
  },
  methods: {
    ...mapActions([
      'changeNumActions' // 将 this.changeNumActions() 映射为 this.$store.dispatch('changNum')
    ])
  }

六、modules

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

// store/modules/index.js
import Vue from 'vue'
import vuex from 'vuex'
import moduleA from './modules/moduleA'
Vue.use(vuex);

export default new vuex.Store({
  // 分模块管理全局数据
  modules: {
    moduleA
  }
})

// store/modules/moduleA.js
const moduleA = {
  namespaced: true,  // 开启命名空间，避免冲突
  state: {
    num: 999
  },
  mutations: {
    changeNum(state) {
      state.num++
    }
  }
}

export default moduleA

// App.vue
// html
<h1>{{$store.state.moduleA.num}}</h1>
// js
  created() {
    this.changeNum()
  },
  methods: {
    changeNum() {
      this.$store.commit('moduleA/changeNum', 10)
    }
  }
}

Xuex 和 localstorage 的区别

• vuex
  1. 储存在内存中（读取内存比本地要快）
  2. 用于组件之间传值
  3. 临时储存，页面刷新后数据丢失
• localstorage
  1. 储存在本地
  2. 用于页面之间传值
  3. 永久储存，除非手动清除

Vuex 官方参考文档