vuex的基本使用,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调用：