初学Vuex

Vuex

Vuex是做什么的？
官方解释：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vux也集成到Vue的官方调试工具 devtools extension，提供了零配值的time-travel调试、状态快照导入导出等高级调试功能。

状态管理模式、集中式存储管理是什么？
简单来说，把多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的vue实例中，让其他组件可以使用。Vuex就是为了提供响应式组件共享变量的管理插件。

vuex的单一状态树(单一数据源)：所有的东西放在一个vuex实例对象里面。

在vue项目中使用

1.安装(npm安装)

npm install vuex --save

2.创建store(仓库)文件包，方便统一管理

3.在store的index里面安装vuex插件

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

Vue.use(Vuex)

4.创建对象,并且导出

const store = new Vuex.Store({
})

export default store

5.挂载创建的对象(在外面的main.js中)

import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

store对象内部

const store = new Vuex.Store({
  state:{
  	counter: 1000,
  },
  mutations:{
    decrement(state) {
    state.counter--
  }
  },
  actions:{
  },
  getters:{
   powerCounter(state) {
    return state.counter * state.counter
  }
  },
  modules: {
    a: moduleA,
    b: mudeleB
  }
})

state

1.state(多方可get读取数据，但是只能特定地方set写数据):保存状态(组件变量)

取state里面的变量：

<h2>{{$store.state.counter}}</h2>

这里最好不要用来改变state里面的值，如果这样直接改值，就代表任何组件都可以对state进行修改，然后其他组件用state里面的数据时也就改变了，不再是单一状态管理了。(在mutations里面改值)

mutations

2.mutations：使用mutations里面定义的方法，在其他组件的methods里面取mutations里面的方法，然后直接用。

 methods: {
      subtraction() {
        this.$store.commit('decrement')
      },
 }

如果mutations里面方法有参数：

methods: {
	  incrementCount(state, payload) {
	    // console.log(count);
	    state.counter += payload.count
	  }
}

使用的时候：

 methods: {
	addCount(count) {
	         payload: 负载
	         this.$store.commit('incrementCount', count)
	      }
}

getters

3.getters:可以看成store的属性计算(getters里面除了第一个参数state外，还有可以有第二个参数getters。)
在其他组件中使用：

    <h2>{{$store.getters.powerCounter}}</h2>

如果想在getters里面接收其他参数，那么可以这样：

gettters:{
 moreAgeStu(state) {
    // return function (age) {
    //   return state.students.filter(s => s.age > age)
    // }
    return age => {
      return state.students.filter(s => s.age > age)
    }
  }
}

外部使用

 <h2>{{$store.getters.moreAgeStu(12)}}</h2>

actions

4.类似mutations；Actions 提交的是 mutation，而不是直接变更状态；Actions 可以包含任意异步操作(异步操作封装方法写在actions里面)。

这里关于异步和同步我的理解：
同步：刚刚打开一个网页的时候，会去请求html、css、js，这个时候如果没有完成，网页无法加载成功，也就是同步。
异步：网页打开后，假设点击后需要请求新的数据时，但是任然不影响网页其他，这个时候就是异步。

modules

5.mudules：在vuex中使用单一状态树，也就是只有一个store，所有这个store中可能会比较拥堵，这个时候可以对store里面的内容进行划分，所有可以在modules定义多个对象，每一个对象就是一个store。

modules: {
  a: moduleA,
  b: mudeleB
}

这里对象a、b就是2个modules对象。
在每一个对象里面可以定以一个和store对象一样结构的

const modeulesA = {
  state: {
    name: 'zhangsan'
  },
  mutations: {
  },
  getters: {
  },
  actions: {
  }
}

使用a里面的数据：

<h2>{{$store.state.a.name}}</h2>