一.vuex是什么,解决了什么问题?

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

个人理解是因为vue各个组件是相对独立的,要共享数据,就变的很麻烦.vuex就是为了解决各个组件传递数据与共享数据.

 

二.vuex的核心概念

vuex的核心概念是store,store中包括了state,mutation,action,getter

1.state:需要用到的状态变量

2.mutation:同步修改state

3.action:异步方法和commit mutation

4.getter:相当于computed,主要用作对state进行计算后,生成新的数据状态

一般流程是组件dispatch一个action,action再commit一个mutation,mutation对state做更改;需要计算后的state,则使用getter.

 

三.一个简单的示例

1.需求:

根据id来获取用户信息

2.安装vuex,安装axios(ajax需求)

3.在src下新建目录store,建立store.js文件,代码如下所示

import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'import qs from 'qs'Vue.use(Vuex)axios.defaults.baseURL = '/api'const store = new Vuex.Store({  state: {    username: '暂无用户名,请获取数据'  },  // Vue 建议我们mutation 类型用大写常量表示  mutations: {    SET_USER_NAME (state, user) {      state.username = user.name    }  },  actions: {    getData (context, id) {      axios.post(        'http://127.0.0.1:9000/mobile/info',        qs.stringify({id: id})      ).then(function (res) {        context.commit('SET_USER_NAME', res.data)      }).catch(function (error) {        console.info(error)      })    }  },  getters: {    username: (state) => state.username === '暂无用户名,请获取数据' ? state.username : '用户名:[' + state.username + ']'  }})export default store

　　

ps:

a.getters中的username方法并无实际作用,只是演示计算生成新的一个状态数据

b.username用了es6的箭头函数;等价于:

username(state){

return username: (state) => state.username === '暂无用户名,请获取数据' ? state.username : '用户名:[' + state.username + ']'

}

4.main.js中注入store;关键代码

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

　　

5.在components中新建query.vue;代码如下:

　　

6.在App.vue中:

　　

至此完成了一个简单的示例

输入id,点击获取数据后

 

四.继续改进(引入mapState)

以上就是基本的用法,但还有些瑕疵,我们继续改进:

1.上面的示例中,在query.vue中我们常见的应该是用computed属性去访问state,因为它是依赖缓存的;代码改进如下:

　　

ps:可以看到我们定义了两个computed属性,humanUserName和username;前者从store的getters取数据,后者直接从state取数据.

2.我们在store.js中再增加一些状态:

const store = new Vuex.Store({  state: {    username: '暂无用户名,请获取数据',    sex: '未知',    age: '0'  },  ...........................})

　　

3.在query.vue中我们仍然打印这些状态:

　　

你会发现现在的代码变的冗长了,原因在于我们在computed挨个获取state;改进这一点

 

4.使用Vuex的mapState来改进,改进部分代码如下

　　

ps:

在...mapState前面的...叫做扩展运算符

五.继续改进

当然<button @click="$store.dispatch('getData', id)">获取数据</button>这个也不是很好,应该将他放入组件的methods中

1.改进代码如下:

　　

2.如果有十个dispatch,this.$store.dispatch('XXX', XXX)这样的代码势必要写十遍;可以使用...mapActions,改进部分代码如下:

　　

然还有个...mapGetters,用法和mapState,mapActions是一样的,在此不做介绍了.

五.增加一个loading提示

现在似乎是完善了,但忽略了一点是,我们的数据是从服务器获取的,所以为了好的用户体验,应该加个loading.在获取数据的时候显示,获取完了隐藏.

1.store.js

import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'import qs from 'qs'Vue.use(Vuex)axios.defaults.baseURL = '/api'const store = new Vuex.Store({  state: {    username: '暂无用户名,请获取数据',    sex: '未知',    age: '0',    waiting: false // loading状态  },  mutations: {    SET_USER_NAME (state, user) {      state.username = user.name    },    // 显示和隐藏waiting    SHOW_WAITING_MESSAGE (state) {      state.waiting = true    },    HIDE_WAITING_MESSAGE (state) {      state.waiting = false    }  },  actions: {    getData ({commit}, id) {      commit('SHOW_WAITING_MESSAGE')      axios.post(        'http://127.0.0.1:9000/mobile/info',        qs.stringify({id: id})      ).then(function (res) {        commit('HIDE_WAITING_MESSAGE')        commit('SET_USER_NAME', res.data)      }).catch(function (error) {        console.info(error)      })    }  },  getters: {    username: (state) => state.username === '暂无用户名,请获取数据' ? state.username : '用户名:[' + state.username + ']'  }})export default store

　　

2.query.vue

　　

ps:对于store中的actions中的方法

getData (context, id) {......}

　　

会自动获得一个默认参数context,它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令.其实actions 还可以简写一下， 因为函数的参数是一个对象，函数中用的是对象中一个方法，我们可以通过对象的解构赋值直接获取到该方法。可以修改如下

getData ({commit}, id) {......}

　　

本文参考了:

http://www.cnblogs.com/SamWeb/p/6527240.html

https://segmentfault.com/a/1190000009404727