浅谈vuex原理及使用

Vuex实现数据共享

在进行vue开发时，我们时常需要在多个独立页面之间传值或者共用一些数据，当多个页面或多个组件间进行复杂的数据传值很困难的时候，如果我们能把需要使用的公共数据放到一个存储空间去存储，然后某一个组件改变了这个公共数据其他组件也能感知到，就能提供我们的开发效率，vuex的设计理念就是如此。

上图所示，虚线区域就是vuex的存储区域，可以把这个区域理解为store仓库，这个仓库是由几部分组成的。
首先大家可以看到state区域：所有的公共数据都是存放在state当中，如果组件想用一个公共数据直接调用state就行。
紧接着我们来看，有时候我们需要改变state数据，但我们不能直接修改state，必须走一个流程，这个流程是这样的：
如果有一些异步操作，那么我们把异步操作放在Actions之中，或者一些复杂批量的同步操作也可以放在Actions之中。组件先去调用Actions，Actions能接着去调用Mutations，Mutations中放着的是一个一个的对state数据的修改。
当然上述流程也并非绝对，有的时候我们也可以略过Actions，让组件直接去调用Mutations修改state里面的数据。这块额外要注意的是，当组件调用Actions时，我们调用的是Dispatch方法来操作Actions，然后呢组件或者Actions去调用Mutations时，是调用Commit方法来操作Mutations，vuex内容大致就这么多，其实它就是单向数据的改变流程。
安装：npm install vuex --save

目录结构：

index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations
})

State.js:

let defaultBalance = '1000'
try {
  if (localStorage.balance) {
    defaultBalance = localStorage.balance
  }
} catch (e) {}

export default {
  balance: defaultBalance
}

Mutations.js:
export default {
  changeBalance (state, balance) {
    state.balance = balance
    try {
      localStorage.balance = balance
    } catch (e) {}
  }
}

main.js中引入import store from ‘./store/index.js’，在根vue实例中传入store，
页面调用state数据：this.$store.state.balance，使用mapState可直接使用this.currentBalance调用：

<script>
  import Header from '../../components/header/header.vue'
  import { mapState, mapMutations } from 'vuex'
  export default{
    name : 'balance',
    computed: {
      ...mapState({
        currentBalance: 'balance'
      })
    },
    components:{
      Header
    },
    data () {
      return {
        addBalance: ''
      }
    },
    methods:{
      handleClickBalance () {
        this.changeBalance(this.addBalance)
      },
      ...mapMutations(['changeBalance'])
    }
  }
</script>