Vue.js简单的状态管理和 Vuex的几个核心概念使用。

---

因为状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也常常逐渐增加。

• 若是多层组件嵌套使用，传递prop,和事件emit。都很不方便。
• 不方便对数据的修改进行历史记录。影响后续的调试！

为了解决这个问题，Vue 提供 vuex。

vuex 甚至集成到 vue-devtools，无需配置便可进行时光旅行调试。

 

---

 

---

Vuex 

 

前置知识：理解什么是component!

组件就是函数。编程就是经过组织小的函数们来解决问题！相似组件！

因而问题就成为：如何传递arguments， 组件是怎样和它的环境互动的？

就像parameters和返回函数中的值。

 

在Vue中咱们使用props来传递data到组件和组件事件，来和周边环境交互。

prop例子

message prop从父组件传递到子组件，经过一个template。

//childrenComponent
{
  props: ['message'],
  created(){
    console.log(message)  
  },
  template: '<div>{{ message }}</div>'
}

// Parent Component
{
  template: `<child-component message="'hello'"></child-component>`,
  components: { childrenComponent }
}

 

event例子（见连接） 主要使用$emit方法和v-on

 

一个问题： 

这是很好的移动数据的办法。只是有一个组件的问题：当嵌套3+层时，交互成了困难。

你不得不传递数据从组件A到B,而后从B到C，等等。 反向events, C emits to B, B to A等等。

 

因而使用state进行状态管理出现了，但这有缺陷，因此出现了Vue, 日后看👇：

 

简单状态管理

常常被忽略的是，Vue 应用中原始数据对象的实际来源 。

当访问数据对象时，一个 Vue 实例只是简单的代理访问。

因此，若是你有一处须要被多个实例间共享的状态，能够简单地经过维护一份数据来实现共享：

const sourceOfTruth = {}

const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth })

 子组件的实例能够经过this.$root.$data来访问sourceOfTruth.

 

问题出现：任何对数据的改变，不会留下变动过的记录。这对调试是一个噩梦！！

所以可使用store模式：

var store = {
  debug: true, state: { message: 'Hello' }, setMessageAction(newVaule) { if (this.debug) console.log('setMessageAction triggered with', newValue) this.state.message = newValue }, clearMessageAction() { if (this.debug) console.log('clearMessageAction triggered') this.state.message = '' } }

 store中的state的改变，都放置在store自身的函数去管理！这就是集中方式的状态管理！

 当错误出现时， 就有了log来记录bug出现以前发生了什么。

 

 此外，每一个实例／组件，能够有本身的私有状态：

var vma = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmb = new Vue({ data: { privateState: {}, sharedState: store.state } })

 

接下来的延伸约定：

组件不该该直接修改属于store实例的state ,而应该执行store实例内的action函数来dispatch事件通知store去改变。

这样约定的好处：

能够记录全部store中发生的state的改变，同时实现能作到记录变动mutation, 保存状态快照，历史回滚／时光旅行的先进的调试工具：vuex.

---

 

 

Vuex

Vuex用于集中管理state。或者说是集中式的状态管理Vue依赖库。 Vuex所作的不是在组件内协调state的数据（coordinate state's data in components）, 而是，在一个巨大的state object内，协调coordinate它们（data）。 任何组件须要一个portion of the state, 就传递它们。

这个state或大或小由程序决定，不过最开始就是一个空对象{ }。

 

安装

npm install vuex  
//或者进入ui,在网页上手动添加。

//而后配置到entry point,或自建一个store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//若是自建store.js, 加上：
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {}
});

 

 

Vuex是一个全局对象，还有2个额外的功能：

1. Vuex的state储存是响应式的。
2. 不能够直接改变store中的state。须要使用(commit)mutation.

简单计数：

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

store.commit('increment')
store.commit('increment')

store.state.count  //输出2

 

 

---

 

核心概念：

• State： 保存组件的共享的状态。
• Getter：用于state的延伸，就是computed计算属性的功能。
• Mutation： 惟一能够改变store的状态的方法：(commit)mutation
• Action: 只能提交Mutation，能够包括async操做。
• Module: 解决单一状态树，致使对象过于庞大的问题。将store分割为多个module模块。至关因而嵌套子模块。

State

单一状态树，一个对象包含所有应用层级状态。 每一个应用只有一个store实例。

Vuex经过store选项，把状态从根组件‘注入’到子组件中。

//辅助函数mapState的用法
//在子组件中，无需每一个state都声明computed属性，使用辅助函数，帮助咱们生成计算属性！

//计算属性？
//若是想要在子组件获得store实例中的状态，最简单的方法就是在计算属性中返回某个状态

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

 

store.state.count变化的时候，会重新求取计算属性， 并触发更新相关的DOM。

可是，这种模式有个缺陷！！❌！！ 

即简单使用store实例，集中管理的缺陷

vue使用的是模块化的构建方法，每一个须要用到state的组件都会频繁的导入store.state。过于频繁下降效能。

Vuex经过store选项，提供了一种机制将state从根组件‘注入’到每一个子组件中（调用Vue.use(Vuex)）

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这能够把 store 的实例注入全部的子组件
  store,

 

子组件能够经过this.$store来访问state。

例子：

根实例vm, 子组件Counter。

vm中注册了store选项，得到了store对象，而后把store实例注入到Counter子组件内。

Counter使用this.$store.state.count访问到store实例。

(个人理解是每一个子组件，都有一个store实例，这样子组件内部能够反复调用这个实例状态，无需再从store对象那里取数据)

Counter还可使用this.$store.commit("increment")来修改store对象的state。

（若是是修改state,则调用store对象的action修改它的state）

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

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

var vm = new Vue({
  el: "#app",
 store,
  components: { Counter },
})

 

mapState 辅助函数

当一个组件须要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，咱们可使用 mapState 辅助函数帮助咱们生成计算属性，让你少按几回键：

import { mapState} from 'vuex'

export default{
  computed: mapState({
     count: state => state.count
     countAlias: 'count'

     //为了可以使用 `this` 获取局部状态，必须使用常规函数
     countPlusLocalState(state) {
        return state.count + this.localCount
     }

 })
}

 

若是映射的计算属性的名字和state的子节点名字相同时，能够给mapState传递一个string数组

We can also pass a string array to mapState when the name of a mapped computed property is the same as a state sub tree name.

computed: mapState([
  // 映射 this.count 为 store.state.count
  // this是指子组件实例
  'count'
])

 

 

对象展开符号...

使用..., 简化了上面的代码

computed: {
  localComputed() { /* ... */},
  ...mapState({
    // ...
  })
}

 

 

 

---

 

Getter

一个简单的演示：mycode pen:https://codepen.io/chentianwei411/pen/JmyeGq

 

针对state的派生的状态的操做：

(store的计算属性)，getter返回值根据它的依赖被缓存起来，只当它的依赖值改变了才会被从新计算。

Getter接受state为第一个参数

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)
    }
  }
})

 

经过属性访问：

store.getters对象中的函数能够访问：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

 

Getter能够接受其余getter做为第二个参数：个人理解，就是store.getters对象被看成第二个参数

const mystore = new Vuex.Store({
  //略。。
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
 doneTodosCount: (state, getters) => { return getters.doneTodos.length }
    
  }
})

 

咱们能够在任何组件中使用getters中的函数：

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

var vm = new Vue({
  el: "#app",
  store: mystore
  components: { Counter },
})

 

经过方法访问：返回的是一个函数 (state) => {  return function(){} }

  getters: {
    //..略
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  },

mystore.getters.getTodoById(2)   
//->返回todo对象一个。{ id: 2, text: '...', done: false }

 

---

 

Mutation

Mycodepen:2个演示：

https://codepen.io/chentianwei411/pen/PyKyNr

mutations属性中的函数能够接受2个参数，

1. 第一个参数是state.
2. 第2个参数最好是一个包含record的对象

  mutations: {//添加参数payload,约定它是对象。
    incrementPayload (state, payload) {
      state.count += payload.amount
    }
  }

 

 

Mutation必须是同步函数，不能说异步函数，由于当mutation触发时，回调函数没能被调用，那么就不能记录追踪回调函数中进行的状态的改变。

使用action处理异步操做：

---

 

 

Action

Action 相似于 mutation，不一样在于：

• Action 提交的是 mutation，而不是直接变动状态。
• Action 能够包含任意异步操做

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

 

 

Action 函数接受一个与 store 实例具备相同方法和属性的 context 对象，所以你能够调用 ：

• context.commit 提交一个 mutation。
• context.state
• context.getters

当咱们在以后介绍到 Modules 时，你就知道 context 对象为何不是 store 实例自己了。

 

dispatch Action

不受必须同步执行的限制。

store.dispatch('increment')

 

 

一样可使用载荷，对象的方式分发：

个人理解：action中异步调用mutations中的函数。actions和mutations中的函数名字一一对应。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
　　 //...略...
    incrementPayload (state, payload) {
      state.count += payload.amount 
    }
  },
  actions: {
　　 //...略... incrementPayload (context, payload) {
      setTimeout( () => {
        context.commit('incrementPayload', payload)
      }, 1000)
    }
  }
}) 

 

 

在组件中分发Action（未看）

组合 Action(未看)

 

---

 

项目结构：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 咱们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

---

 

 

插件

Vuex.Store的实例方法：

subscribe(handler: Function): Function

hander会在每一个mutation完成后调用，接收mutation和通过mutation后的state做为参数：