Vue核心插件 —— Vuex

 Vuex之集成

在项目目录新建store文件夹，推荐项目结构

安装vuex插件 

npm i vuex -S

在store.js文件 中编写入口文件代码，推荐使用 export default () => {return new Vuex.Store({})} 方法（即方法2）创建store实例，每次服务端渲染的过程中，都需要新生成一个store 不能用同一个store，会有内存溢出的问题，因此需要返回一个方法，外层去创建new 一个store对象。示例如下 ：

import Vuex from 'vuex'

// 方法1
// const store = new Vuex.Store({
//   state: {
//     count: 0
//   },
//   mutations: {
//     updataCount (state, num) {
//       state.count = num
//     }
//   }
// })
// export default store

// 方法2
export default () => {
  return new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      updataCount (state, num) {
        state.count = num
      }
    }
  })
}

定义好vuex的入口文件之后，接下来，要在项目的入口文件（index.js）中使用 

import Vue from 'vue'
import App from './app.vue'
import Vuex from 'vuex'
import createStore from './store/store'

Vue.use(Vuex)

const store = createStore()

new Vue({
  store,
  render: (h) => h(App)
}).$mount(root)

至此，就能在组件中使用 console.log(this.$store) 获得相关信息

注意，声明store，应该放进应用入口，（vue是树形结构，只有放在最外面，它的子节点才能拿到$store对象） 

Vuex之state和getters

在state文件夹下，新建state.js文件，存储默认变量

export default {
  count: 0,
  firstName: 'wang',
  lastName: 'haili'
}

在getters文件夹下，新建getters.js文件 ，通过state.js中的变量简单操作之后获得其他变量，不会改变原变量的操作

export default {
  fullName (state) {
    return `${state.firstName} ${state.lastName}`
  }
}

修改store.js文件的配置，引入state.js 和 getters.js

import Vuex from 'vuex'

import defaultState from './state/state'
import getters from './getters/getters'

export default () => {
  return new Vuex.Store({
    state: defaultState,
    getters
  })
}

在.vue文件中使用方法如下：

<template>
  <div>
    <p>{{count}}</p>
    <p>{{fullname}}</p>
  </div>
</template>
<script>
  export default {
    computed: {
      count () {
        return this.$store.state.count
      },
      fullName () {
        return this.$store.getters.fullName
      }
    }
  }
</script>

Vuex之mutation和action

在mutations文件夹下，新建mutations.js文件，对state.js中的变量进行更新操作，即会改变原变量的操作

export default {
  // 只传两个参数 state, {num1, num2}
  updataCount (state, num) {
    state.count = num
  }
}

在actions文件夹下，新建actions.js文件，同mutation，只是有异步改变state.js 中变量的操作写在actions.js 中

// actions 和 mutations 类似，mutations中只能有同步代码，actions中写异步代码
export default {
  updataCountAsync (state, data) {
    setTimeout(() => {
      state.commit('updataCount', data.num)
    }, data.time)
  }
}

 修改store.js文件的配置，引入mutations.js  和 actions.js

import Vuex from 'vuex'

import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'

const isDev = process.env.NODE_ENV === 'development'
export default () => {
  return new Vuex.Store({
    strict: isDev, // true规定无法在外部修改state，只能在mutations中修改
    state: defaultState,
    mutations,
    actions,
    getters,
    modules: {}
  })
}

在.vue文件中使用方法如下：

<template>
  <div>
    <p>{{count}}</p>
    <p>{{fullname}}</p>
  </div>
</template>
<script>
  import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    methods: {
      // mapActions 和 mapMutations 写在methods下
      ...mapActions(['updataCountAsync']),
      ...mapMutations(['updataCount'])
    },
    computed: {
      // mapState 和 mapGetters 写在computed下
      ...mapState(['count']),
      ...mapState({ // 重命名count
        counter: 'count'
      }),
      ...mapGetters(['fullName'])
    }
  }
</script>

若一直使用this.$store取值编辑，相对麻烦了些。我们可以通过扩展运算符简化获取state的代码，需要安装解析扩展运算符的插件（ES7不同阶段语法提案得转码规则，共4个阶段，选装一个，-1-2-3-4）

npm i babel-preset-stage-1 -D

修改.babelrc配置文件

 不安装解析插件之前，项目会报错哦。如下：

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！