Vuex基本概念

Vuex基本概念

• State
• Getter
• Mutation
• Action
• Module

简单的Store

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++;
    } 
  }
});

store.commit('increment');
console.log(store.state.count);// 1

常见流程

Vue Component --dispatch--> Action

Action --commit--> Mutations

Mutations --mutate--> State

State --render--> Vue Component

State

获取vuex中的状态方法

在计算属性:computed中返回某个状态，要获取Vuex那个状态，要在computed中定义

由于在全局使用了Vue.use(Vuex)，所有组件可以通过this.$store拿到Vuex的store

const Counter = {
  template: `<div>{{count}}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

由于computed的属性是函数，那么在返回状态之前，还有更多操作的空间。

mapState辅助函数

import {mapState} from 'vuex'

mapState辅助函数接收一个对象或者一个字符串数组，返回计算属性:computed

//这个可以单独放在一个文件中，重复使用
const vuexComputed = mapState({
  //使用函数一定要有返回值

  //箭头函数写法，第一参数是state
  count: state => state.count,
  
  //字符串形式 'count' 等同于 state => state.count
  countAlias: 'count',
  
  //可以使用'this'获取局部状态，使用常规函数，'this'会绑定为 computed的组件实例
  countPlusLocalState (state) {
    return state.count + this.localCount;
  }
});

然后将mapState生成的vuexComputed和Vue组件实例的computed合并

使用对象展开运算符...

{
  //...某个组件
  
  computed: {
    localComputed () {},
    //使用对象展开运算符将vuexComputed混入到外部对象中
    ...vuexComputed
  }
}

如果状态都只是单纯的显示，可以传一个字符串数组给mapState

const vuexComputed = mapState(['count']);

完整的demo:

//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit('increment')
console.log(store.state.count)

Vue.config.productionTip = false
Vue.prototype.$http = axios

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

main.js要使用Vue.use(Vuex)以及将store添加到全局new Vue({store})

下面的所有子组件才可以拿到store

<template>
  <div class="hello">
    <div>{{count}}</div>
    <div>{{countAlias}}</div>
    <div>{{countPlusLocalState}}</div>
  </div>
</template>

//Component HelloWorld
import {mapState} from 'vuex'

const vuexComputed = mapState({
  count: state => state.count,
  countAlias: 'count',
  countPlusLocalState (state) {
    return state.count + this.localCount
  }
})

export default {
  name: 'HelloWorld',
  data () {
    return {
      localCount: 2
    }
  },
  computed: {
    ...vuexComputed
  }
}

Getter

Getter和计算属性:computed功能一样，只不过，它是store的，也会缓存计算的值。

组件中拿到getter

Getter会暴露store.getters对象。

const store = new Vuex.Store({
  state: {
    count: 0,
    arr: [1, 2, 3, 4, 5, 6]
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  getters: {
    get6: state => {
      return state.arr.filter(num => num === 6)
    }
  }
})

{
  //...某个组件
  computed: {
    get6 () {
      return this.$store.getters.get6
    }
  }
}

在定义getter时，有两个参数传入state、getters

getters: {
  get6: state => state.arr.filter(num => num === 6),
  getNum: (state, getters) => {
    return getters.get6
  }
}

定义getter方法

//要使用函数要封装2层函数以上，在组件中拿到getTodoById时，默认执行第一层
getters: {
  getTodoById: state => id => state.todos.find(todo => todo.id === id)
}

store.getters.getTodoById(2)

mapGetters
功能：将store中的getter映射到局部的计算属性computed中

和mapState类似，支持传入对象或者字符串数组，不过只能获取，不能重写，或者定义

//store
{
  state: {
    arr: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  getters: {
    get6: state => {
      return state.arr.find(num => num === 6)
    },
    getNum: state => num => state.arr.find(n => n === num) || '错误num'
  }
}

<template>
  <div class='helloworld'>
    <div>{{get6}}</div>
    <div>{{getNum(4)}}</div>
  </div>
</template>

const vuexGetter = mapGetters(['get6', 'getNum']);

//如果想定义别名使用对象的方式
//const vuexGetter = mapGetters({getSix: 'get6', getNumber: 'getNum'})

export default {
  name: 'HelloWorld',
  data () {
  },
  computed: {
    ...vuexGetter
  }
}

Mutation

修改Vuex的store中的状态的唯一方式是commit mutation。

每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

//type: increment
store.commit('increment')

Payload

mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

store.commit可以支持多参数模式，或者一个对象模式

store.commit({
  type: 'increment',
  amount: 10
})

其中一个对象模式和redux很像

而且事件类型type也可以使用常量来替代

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION';

// store.js
import Vuex from 'vuex';
import { SOME_MUTATION } from './mutation-types';

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

组件中提交mutation

在组件中可以通过this.$store.commit('xxx')提交mutation

还有就是使用mapMutations辅助函数，不过这次不是映射到计算属性，而是methods

使用方式和mapGetters一模一样

import { mapMutations } from 'vuex';

//对象的方式可以重新命名，字符串数组是直接引用
const vuexMutations = mapMutations(['increment']);

export default {

  methods: {
    ...vuexMutations
  }
}

Mutation 和 Reduce

Reduce的基本形式

(state, Action) => newState || state

转化为Mutation，那么

const Action = {
  type: 'increment',
  amount: 10
}

const initState = {
  count: 0
}

export default (state = initState, Action) => {
  switch(Action.type){
    'increment':
      return Object.assign({},state,{count: Action.amount + state.count})
    default:
      return state
  }  
}

在redux中改变状态：

store.dispatch(Action) -> reduce(state, Action) -> newState -> render view

在mutation中改变状态:

store.commit('increment', playload) -> mutations['increment'](state, playload) -> newState -> render view

Action

一般Action可以处理异步任务，而Mutation必须只能同步。

在异步流程中，先异步获得所需的数据，然后将返回的数据组合成Action。

在生成Action之前，有个createAction函数。

//Redux 思维的Action
const createAction = async (url) => {
  const resData = await asyncGetData(url)
  
  return {
    type: 'SOME_TYPE',
    resData  
  };
};

//Action 是对象
const Action = createAction('some url')

store.commit(Action)

在Vuex中的Action和Redux是有区别的

在Vuex中的Action充当着createAction的功能

commit应当只在action中使用，在commit之前还有dispatch

在Redux中，dispatch分发的直接是action

在Vuex中，dispatch分发的是createAction或者mutation，之后再commit action

Action 不同于 Mutation

• Action提交的是mutation,而不是直接变更状态
• Action可以包含任意异步操作

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action函数接受一个与store实例具有相同方法和属性的context对象

其中context不是store实例

分发Action

store.dispatch('increment')

组件中分发Action
组件中使用this.$store.dispatch('xxx')

或者使用mapActions辅助函数将actions映射到methods中

组合Action
dispatch函数在结束后返回一个Promise

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

Module

可以将store分割成模块Module

每个模块拥有自己的State、Mutation、Action、Getter

然后将所有模块组合成一个，就形成了一个状态树。

//一般我们可以按页面或者功能模块来划分模块
//大型项目可以按一个大模块划分
//然后在大漠块中再按页面划分
//如果还要更细，页面也可以切割成多个模块

//页面A的状态
const pageA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

//页面B的状态
const pageAB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: pageA,
    b: pageAB
  }
})

store.state.a // -> pageA 的状态
store.state.b // -> pageAB 的状态

模块的局部状态

每个模块的state都是局部状态，模块中的getter、mutation、传进来的state都是局部的

而action可以通过context.state拿到局部的状态,context.rootState拿到全局的

不同于mutation，getter也可以拿到全局状态，getter的第三个参数rootState

命名空间

默认情况下，模块内部的action、mutation和getter是注册在全局命名空间的--多个模块对同一mutation或action作出响应

多个模块对同一mutation或action作出响应，类似一个事件拥有多个处理程序（观察者模式）

在模块中添加namespace: true可以避免添加到全局队列中

添加命名空间后的getter : (state, getters, rootState, rootGetters) => {}

添加命名空间后的action context : getters访问局部的 rootGetters访问全局的

如果添加了命名空间，但是还是想暴露某个action或getter为全局，使用root:true

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

mapState、mapGetters、mapActions、mapMutations绑定带命名空间的模块。

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo',
    'bar'
  ])
}

还可以使用createNamespacedHelpers来绑定命名空间值，类似bind(context)

import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module');

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

模块动态注册

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

//卸载'myModule'，只能卸载动态装载的模块
 store.unregisterModule('myModule')

应用

如果是小型应用，可以按页面来分模块

//pagea.js
export default {
  namespace:true,
  state: {},
  getters: {},
  mutations: {},
  actions: {}
}

//pageb.js
//pagec.js
//paged.js
//以上页面也是按pagea.js的方式

然后用一个文件引进所有模块，且全部暴露export

//modules.js
import pageA from './pagea.js'
import pageB from './pageb.js'
import pageC from './pagec.js'
import pageD from './paged.js'

export default {
  pageA,
  pageB,
  pageC,
  pageD
}

最后在main.js引入

//main.js
import modules from './modules/modules'

//将模块装进Store树中
const store = new Vuex.Store({
  //全局
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  //模块
  modules
}) 

//在组件中可以
this.$store.state.pageA
this.$store.state.pageB
this.$store.state.pageC
this.$store.state.pageD