vuex

一、vuex

vuex是一个专为Vue.js应用程序开发的状态管理模式。

实现组件全局状态（数据）管理的一种机制，可方便实现组件间数据的共享。

-- vuex 是单向数据流，因此不能用于表单元素。

1. 安装引用

　　- npm i vuex --save

　　- 在main.js中引入：

　　　　- import Vue from 'vue'

　　　　- import Vuex from 'vuex'

　　　　- Vue.use(Vuex)

　　- const store = new Vuex.Store({

　　　　state,

　　　　mutations,

　　　　actions,

　　　　getters

　　　　})

2. 核心概念

　　1） state （存放全局共享的实例）

　　　　vuex使用单一状态树，用一个对象就包含了全部的应用层级状态，作为一个“唯一数据源（SSOT）”存在。即每个应用应仅仅包含一个store实例。

　　当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会较冗余，因此可采用mapState 辅助函数来帮助生成计算属性：

　　import {mapState} from 'vuex'

　　export default {

　　　　...

　　　　compted: mapState({

　　　　　　count: state => state.count;

　　　　　　// 传字符串参数 'cont' 等同于 `state => state.count`

　　　　　　countAlias: 'count',

　　　　　　//为了能使用 this 获取局部状态，必须使用常规函数

　　　　　　countPlusLocalState (state) {

　　　　　　　　return state.count + this.localcount

　　　　　　}

　　　　})

　　}

　　2) Getter （对state中的数据加工处理形成新的数据，不改变原数据）

　　可以认为是state的计算属性，getter的返回值会根据其依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算，getter接受state作为其第一个参数，也可接受其他getter作为第二个参数。

const store = new Vuex.Store({

　　state: {

　　　　todos: [

　　　　　　{id: 1, text: '...', done: true},

　　　　　　{id: 2, text: '...', done: false},

　　　　]

　　},

　　getters: {

　　　　doneTodos: state => {

　　　　　　return state.todos.filter(todo => todo.done);

　　　　}

　　}

})

　　mapGetters 辅助函数将store中的getter映射到局部计算属性：

　　import {mapGetters} from 'vuex'

　　export default {

　　　　...

　　　　computed: {

　　　　　　...mapGetters(['doneTodos',... ])

　　　　　　// 或使用对象形式

　　　　　　...mapGetters({

　　　　　　　　todos: 'doneTodos'

　　　　　　})

　　　　}

　　}

　　3) Mutations : 更改Vuex的store中的状态的唯一方法是提交mutation。

　　mtations中不能执行异步操作，要触发mutation事件需要调用store.commit方法。

　　也可使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

const store = new Vuex.Store({

　　state: {

　　　　count: 1

　　},

　　mutations: {

　　　　increment (state, n) {

　　　　　　state.count += n;

　　　　}

　　}

})

import {mapMutations} from 'vuex'

export default {

　　　　...

　　　　methods: {

　　　　　　handle() {

　　　　　　　　this.$store.commit( 'increment' )

　　　　　　}

　　　　　　// 或

　　　　　　...mapMutations(['increment ',... ])  //将 this.increment ()映射为 this.$store.commit( 'increment' )

　　　　　　// 或

　　　　　　...mapMutations({

　　　　　　　　add: 'increment' //将 this.add()映射为 this.$store.commit( 'increment' )

　　　　　　})

　　　　}

　　}

　　4） action 不能直接修改state中的数据

　　　　1. action 提交的是mutation,而不是直接变更状态

　　　　2. action可以包含任意异步操作。　

const store = new Vuex.Store({

　　state: {

　　　　count: 1

　　},

　　mutations: {

　　　　increment (state, n) {

　　　　　　state.count += n;

　　　　}

　　}，

　　actions: {

　　　　increment(context) {

　　　　　　context.commit('increment')

　　　　}

　　}

})

　　action函数接受一个与store实例具有相同方法和属性的context对象，因此可以调用context.commit()提交一个mutation,或通过context.state或context.getters来获取state和getters.

　　action通过 store.dispatch来获取

　　methods: {

　　　　this.$store.dispatch('increment')

　　}

　　可使用mapActions 辅助函数将组件的methods 映射为 store.dispatch 调用。

　　import {mapActions} from 'vuex'

　　 methods: {

　　　　...mapActions([ 'increment' ])

　　　　// 或

　　　　...mapActions({add: 'increment'})

　　}

　　5) Module 

　　Vuex允许将store分隔成模块，每个模块有自己的state, mutation, action, getter, 甚至是嵌套子模块。