vuex 2.x新版使用指南 - 简书
vuex 2.x新版使用指南
vuex为了迎合vue2.0的变化 进行了大量的调整和优化
先看下尤大2.0的设计
总结下大概有几点变化
1. 更加语义化
原文 Terms naming change for better semantics 这个语义化说的是触发action和mutation的API上在使用action的时候 我们一般是从vue组件本身dispatch派发一个action 这个其实只是一个命令 并没有实际改变什么， 而dispatch一个mutation 其实是改变了vuex本身的数据 所以一般从数据角度理解 这种应该属于事物提交。那么变化之后的命名就是commit这样更加语义化 也更好的理解职责
dispatch --& Action
Add : function(){
this.$store.dispatch('ADD',2).then(function(resp){
console.log(resp)
commit --& Mutation
"ADD" : function(store , param){
return new Promise(function(resolve, reject) {
mit('ADD',param)
resolve("ok");
1.x 写法就是触发action和mutation都叫dispatch
ADD: function(store, param ){
store.dispatch('COMMIT',param)
1.x之前的版本action是不定义在vuex里的,
而2.x actions可以直接在store中定义了 也就是可以在store实例中直接dispatch
var store =
new Vuex.Store({
messages: 0
mutations:{
"ADD": function(state, msg) {
state.messages +=
// action不用再去外面定义 可以直接写在构建参数里
"ADD" : function(store , param){
mit('ADD',param)
store.dispatch('ADD',2)
而getter也是如此 在vue中直接取getters
computed:{
msg : function(){
return this.$store.getters.getMessage
3. Promise Action
原文 Composable Action Flow直译 可组合的action流其实这个组合事件流概念 没怎么用过 也不好翻译 我就简单从变化性翻译它就是action现在返回了promise 在之前的版本 并没有返回promise 而2.x的源码中已经返回了promise所以也就可以支持所谓的Composable Action
// action我们定义一个返回promise的add action
"ADD" : function(store , param){
return new Promise(function(resolve, reject) {
mit('ADD',param)
resolve("ok");
// 这里可以在dispatch之后直接处理异步
this.$store.dispatch('ADD',2).then(function(resp){
console.log(resp) // ok
4. MapGetters/ MapActions
新版vuex提供了几个封装方法 mapState, mapMutations, mapGetters,mapActions
这些都是什么鬼呢？
其实如果你用过vuex1.x以下的版本 其实它就是我们vue组件中的vuex属性的 换了一种更高逼格写法
可以定义一组要获取的actions getters 然后map进来
// 旧版写法
var App = Vue.extend({
template:"....",
msg : function(state){
return state.messages
add :actions.ADD
// 新版写法 es5 写法
var App = Vue.extend({
template:"....",
computed:Vuex.mapGetters({
msg : 'getMessage'
methods:Vuex.mapGetters({
add : 'ADD'
这种本质跟1.x的vuex写法是一样的 内部都是使用vue的Object.defineProperty取做响应式
// es6写法 支持rest参数这种写法 也可以直接完全使用map套装注入
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
someComuted () { … },
...mapGetters(['getMessage', 'getName'])
methods: {
someMethod () { … },
...mapActions(['ADD','EDIT'])
5. 其他变动
最新的vuex-2.0.0.rc5 为说明API一些新变化
// 这个就是换个名字
store.middlewares -& store.plugins
// 这货貌似干掉又被还原了 尤大真是喜怒无常 哈
store.watch
// 使用subscribe 监听vuex的变化
store.subscribe((mutation, state) =& { ... })
// 注册模块
registerModule
// 注销模块
unregisterModule
总体来说vuex2.0的变化还是跟vue本身一样 也算折腾了一下 新版的写法和逼格更高些。作为vue全家桶中重要的状态流管理框架 vuex值得你拥有
vuex入门实例结束 感谢阅读：）
</yelingfeng3139人阅读
Vuex（22）
今天试了一下Vuex,感觉跟Redux的实现思想类&#20284;。再此，简单地总结一下。
什么是Vuex
在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来，应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类&#20284;的单向数据流的方式来管理数据。用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。如下图所示：
vuex-flow.png
npm install --save vuex
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
Vuex的组成部分
完整的应用Vuex开发的应用结构应该是这样的：
vuex-complete.png
下面针对比较核心的部分进行说明。
State负责存储整个应用的状态数据，一般需要在使用的时候在跟节点注入store对象，后期就可以使用this.$store.state直接获取状态
import store from './store'
el: '#app',
render: h =& h(App)
这个store可以理解为一个容器，包含着应用中的state等。实例化生成store的过程是：
const mutations = {...};
const actions = {...};
const state = {...};
Vuex.Store({
后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用this.$store.state获取，当然，也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去，如
//我是组件
import {mapState} from 'vuex'
export default {
computed: mapState({
count: state =& state.count
这样直接就可以在组件中直接使用了。
Mutations的中文意思是“变化”，利用它可以更改状态，本质就是用来处理数据的函数，其接收唯一参数&#20540;state。mit(mutationName)是用来触发一个mutation的方法。需要记住的是，定义的mutation必须是同步函数，否则devtool中的数据将可能出现问题，使状态改变变得难以跟踪。
const mutations = {
mutationName(state) {
//在这里改变state中的数据
在组件中触发：
//我是一个组件
export default {
methods: {
handleClick() {
this.$mit('mutationName')
或者使用辅助函数mapMutations直接将触发函数映射到methods上，这样就能在元素事件绑定上直接使用了。如：
import {mapMutations} from 'vuex'
export default {
methods: mapMutations([
'mutationName'
Actions也可以用于改变状态，不过是通过触发mutation实现的，重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类&#20284;，也是绑定在组件的methods上的。如果选择直接触发的话，使用this.$store.dispatch(actionName)方法。
const actions = {
actionName({ commit }) {
commit('mutationName')
在组件中使用
import {mapActions} from 'vuex'
export default {
methods: mapActions([
'actionName',
有些状态需要做二次处理，就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。
const getters = {
strLength: state =& state.aString.length
//上面的代码根据aString状态派生出了一个strLength状态
在组件中使用
import {mapGetters} from 'vuex'
export default {
computed: mapGetters([
'strLength'
插件就是一个钩子函数，在初始化store的时候引入即可。比较常用的是内置的logger插件，用于作为调试使用。
import createLogger from 'vuex/dist/logger'
const store = Vuex.Store({
plugins: [createLogger()]
最后，还有一些高级用法，如严&#26684;模式，测试等可能使用频率不会特别高。有需要的时候查官方文档就可以了。总的来说，Vuex还是相对比较简单的，特别是如果之前有学过Flux,Redux之类的话，上手起来更加容易。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：375395次
积分：6565
积分：6565
排名：第3119名
原创：86篇
转载：1246篇
(167)(393)(328)(117)(150)(5)(25)(88)(87)vuex入门实例(2/3) - 推酷
vuex入门实例(2/3)
vuex入门实例2
这章节我准备以 requirejs 模块化，讲解下如何快速上手 vuex
工程代码结构如下
|----assets
|----component
|----config.js
|----main.js
|----require.js
|--index.html
存放所有源码
数据处理接口
一些资源文件css, images ,js等
components
存放vue组件
依赖包 vuex vuex-resource lodash 等
vuex文件详细看上一节
requirejs配置文件
主入口文件
1. 创建index.html 引入 requirejs 并加载依赖css
&link rel=&stylesheet& href=&src/assets/js/bootstrap/css/bootstrap.css&&
&link rel=&stylesheet& href=&src/assets/css/md-facefont.css&&
&link rel=&stylesheet& href=&src/assets/js/bootstrap-material-design/css/bootstrap-material-design.css&&
&link rel=&stylesheet& href=&src/assets/js/bootstrap-material-design/css/ripples.min.css&&
&script src=&src/require.js& data-main=&src/config.js& &&/script&
2. 创建config.js 配置环境依赖
这里加入 jquery , vue , vue-resource , vuex , lodash , bootstrap-material-design
bootstrap-material-design
本身依赖 jquery 和 bootstrap 配置好 shim ,之后 require 我们的 main.js
require.config({
baseUrl : &./src&,
jquery:&./lib/jquery.min&,
vue:&./lib/vue&,
vueResource:&./lib/vue-resource.min&,
vueX:&./lib/vuex&,
api :&./api/index&,
lodash : &./lib/lodash.min&,
bootstrap : &./assets/js/bootstrap/js/bootstrap.min&,
ripples : &./assets/js/bootstrap-material-design/js/ripples.min&,
material:&./assets/js/bootstrap-material-design/js/material.min&
bootstrap : ['jquery'],
ripples:['jquery'],
material:['jquery'],
packages: [
name: 'components',
location: 'component',
main: 'components'
name : &vuex&,
location :&vuex&,
main : &vuex&
require([&./main&])
3. 创建main.js
引入依赖包,我们写的App.js 和vuex的 store 对象.
创建vue对象 并 加载vuex的 store 挂到body上 ready后初始化我们的 bootstrap-material-design
define(function(require){
var Vue = require(&vue&);
var store = require(&vuex/store&)
require(&component/App&)
var $ = require(&jquery&);
require(&bootstrap&)
require(&ripples&)
require(&material&)
Vue.config.debug =
Vue.config.devtools =
el : &body&,
store: store,
ready: function(){
$.material.init();
components:{
4. 创建我们应用的状态管理
vuex/store.js这里同时加载我们的多个业务 state (search,searchGroup),
vuex 在实例化的时候会合并我们定义的modules 进而完成模块化的需求
define(function(require){
var Vue = require(&vue&);
var Vuex = require(&vueX&);
var search = require(&vuex/modules/search&);
var searchGroup = require(&vuex/modules/searchGroup&);
Vue.use(Vuex)
Vue.config.debug =
return new Vuex.Store({
modules: {
search : search,
searchGroup :searchGroup
strict: true,
middlewares: [Vuex.createLogger]
5. 创建操作类型Types
vuex/mutation-types.js以search组件为说明 我们需要3个动作操作分别是如下
SET_SEARCH_LIST 设置需要显示的结果数组
UPDATE_SEARCH_VAL 更新查询值
CLEAR_SEARCH_VAL 清空我们的查询值
定义好类型后 在 mutations 和 actions 里使用
SET_SEARCH_LIST : &SET_SEARCH_LIST&,
UPDATE_SEARCH_VAL : &UPDATE_SEARCH_VAL&,
CLEAR_SEARCH_VAL : &CLEAR_SEARCH_VAL&,
6.创建业务模块modules
这里以 vuex/modules/search.js 为例
我们定义个 state 包括2个属性 searchKey 和 searchResultList
分别配置 操作类型变化的 state 处理。
最后返回我们的 state 和 mutations
以官网API中表示， mutation 必须是同步函数 所以异步操作尽量在 actions 里处理
define(function(require){
var types = require(&vuex/mutation-types&);
var state = {
// 查询条件
searchKey : &&,
// 查询结果
searchResultList : []
// mutations
var mutations = {}
mutations[types.SET_SEARCH_LIST] = function(state,list) {
state.searchResultList =
mutations[types.UPDATE_SEARCH_VAL] = function(state , key) {
state.searchKey =
mutations[types.CLEAR_SEARCH_VAL] = function(state ) {
state.searchKey = &&;
state.searchResultList = [];
state : state,
mutations : mutations
6. 创建动作actions
这里定义也是对应3个操作
清空查询项
更新查询项
获取查询结果集合
clearSearchKey 方法中
使用store.dispatch(对应types) 触发变化mutation
(如果参数可以在第二个参数后面加 最新版本也可以直接对象形式传参数)
define(function(require){
var api = require(&api&);
var types = require(&vuex/mutation-types&)
var actions = {
// clear 查询项
clearSearchKey : function(store){
store.dispatch(types.CLEAR_SEARCH_VAL)
// 更新查询项
updateSearchKey : function(store , key){
store.dispatch(types.UPDATE_SEARCH_VAL,key);
// 查询结果集合
searchParamList : function(store , group ,key){
var result = api.searchParamList({
type:group,
if(result.data){
store.dispatch(types.SET_SEARCH_LIST,result.data);
7. 创建业务组件
折腾了这么多 终于可以写组件了 - -！以 component/Search.js 为说明
我们引用 searchGroup 组件 , vuex 的 actions 再组件中创建 vuex 对象
在组件中配置getters来接收store的state
例如 searchKey 我们引用了 vuex/modules/search 中的 state 对象中的 searchKey 这里我们只是只读不去修改
配置methods来接受 vuex/actions 里的操作方法
最后编写我们其他代码 完成search.js的创建
var Vue = require(&vue&);
var SearchGroup = require(&component/SearchGroup&);
var actions = require(&vuex/actions&)
var getters = require(&vuex/getters&);
return Vue.extend({
getters : {
searchGroupItem: function(store){
return store.searchGroup.searchGroupItem
searchGroup:function(store){
return store.searchGroup.searchGroup
searchKey : function(store){
return store.search.searchKey
isEmptySearchKey : getters.isEmptySearchKey
actions: {
searchParamList:actions.searchParamList ,
clearSearchKey:actions.clearSearchKey,
updateSearchKey:actions.updateSearchKey
methods : {
clearAction:function(){
this.clearSearchKey()
searchAction:function(e){
if(this.searchKey.length){
this.searchParamList(this.searchGroup,this.searchKey)
update:function(e){
this.updateSearchKey(e.target.value)
template : &#search-template&,
components:{
searchGroup:SearchGroup
经过以上步骤完成一个 search 组件在 vuex 的框架体系中的创建流程,当然步骤其实挺麻烦的 还有很多细节和方法没点到 还请见谅。
个人水平有限 只能BB到这里 结合本文可以去看es6的版本。
说下vuex下组件的一个整体流程
search.js中触发一个 methodA
methodA 触发(getter --& Actions methodA )
methodA 通过 vuex.actions 里 Actions store.dispatch(types.METHODA)
vuex.modules.search配置的 mutations[types.METHODA] 进行state的操作
state改变某个状态A 响应到search.js中属性a (getter --& a = search.A)
特别感谢jackblog-vue
专业技术群分享
PHP高级开发
JAVA高级开发
移动微信前端开发
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致