Vuex笔记

本质：

实现组件之间的数据共享，类似与Spring的IOC，所以还是很有必要的，而且是MVVM的

vue特点：vue适合单页面项目

版本：Vue2版本对应Vuex3版本

vuex：所有组件有一个共享的全局对象store

安装vue：

-g  全局安装

npm i vue -g

安装vue脚手架：

npm i vue-cli -g

 安装vue路由：

npm install vue-router -g

创建一个项目：

vue create vuex-demo

安装VueX

npm i vuex@3

项目创建后： 

 项目启动：

npm run serve

全局共享数据state的用法：

main.js

import Vue from 'vue'
import App from './App.vue'
// vuex
import store from './store'

Vue.config.productionTip = false//没有的话，会显示你生产模式的消息

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

store.js 

// vuex的store全局共享类
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 全局属性
    count: 0
  },
  getters: {
    /**
     * get属性，不是方法
     * @param state
     * @returns {string}
     */
    showNum(state) {
      return '当前的数量是' + state.count+'个'
    }
  },
  mutations: {
    /**
     * 方法，对全局数据的操作在这里完成
     * 不能执行异步代码，比如setTimeout
     * @param state
     * @param step
     */
    add(state, step) {
      state.count += step
    },
    sub(state, step) {
      state.count -= step
    }
  },
  actions: {
    /**
     * 方法
     * 异步操作变更数据
     * @param context
     */
    addAsync(context, step) {
      setTimeout(() => {
        context.commit('add', step)
      }, 2000)
    },
    subAsync(context, step) {
      setTimeout(() => {
        context.commit('sub', step)
      }, 2000)
    }
  },
  modules: {}
})

Addition.vue 

<template>
  <div>
    <h3>当前的count值为：{{ $store.state.count }}</h3>
    <button @click="$store.commit('add',2)">加一</button>
    <button @click="$store.dispatch('addAsync',2)">延时加一</button>
    <h3>{{$store.getters.showNum}}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

Subtraction.vue 

<template>
  <div>
    <h3>当前的count值为：{{ count }}</h3>
    <button @click="sub(3)">减一</button>
    <button @click="subAsync(5)">延时减一</button>
    <h3>{{ showNum }}</h3>
  </div>
</template>

<script>

import {mapActions, mapMutations, mapState,mapGetters} from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    /**
     * 方式二
     * 展开语法
     */
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    /**
     * 方式二
     */
    ...mapMutations(['add', 'sub']),
    ...mapActions(['subAsync'])
  }
}
</script>

App.vue：

<template>
  <div>
    <my-addition></my-addition>
    <my-subtraction></my-subtraction>
  </div>
</template>

<script>

import Addition from "./components/Addition";
import Subtraction from "./components/Subtraction";

export default {
  data() {
    return {}
  },
  components: {
    'my-addition': Addition,
    'my-subtraction': Subtraction
  }
}
</script>