vuex使用总结一

VUEX是什么？

官方概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解：Vuex 就是前端为了方便数据的操作而建立的一个“前端数据库”。主要用于多个组件间的数据通信和状态管理；用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。如下图所示：

使用VUEX

安装：

npm install --save vuex

引入：

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

VUEX组成部分

完整的Vuex开发的应用结构：

VUEX理解

vuex 是” 前端的数据库“。State 就是数据库。Mutations 就是我们把数据存入数据库的 API，用来修改state 的。getters 是我们从数据库里取数据的 API，取数据时不能对数据库进行修改，所以getters 是一个”纯函数“，就是不会对原数据造成影响的函数，比如数组的concat（）方法、slice（）方法；与之对应的是数组的push（）方法、splice（）方法，他们会改变原数组的值。从页面获取到数据向state里面存储时，需要对数据进行处理，处理完成之后再存储到state中，这就是action的过程，当然也可以不作处理直接存储到数据库，所以vuex也可以在action中直接存储，直接mutation。然后我们把这几部分用store 包一下，vuex就生成了。

上手VUEX

首先我们需要先使用vue-cli去初始化一个项目。项目创建完成之后，在src下创建store文件夹。这个store文件夹，就是我们放置vuex文件的地方。

在store文件夹下创建 index.js 作为我们生成vuex的文件。

// index.js
import Vue from 'vue'; 
import Vuex from 'vuex';

// 需要注册vuex到vue中
Vue.use(Vuex);

// 使用 es6 语法把vuex的实例对象输出
export default new Vuex.Store({
})

然后在vue的初始文件中注册vuex的实例（main.js）：

import store from './store'

new Vue({
    ...
      store
})

以下是一个简单的VUEX范例：

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

Vue.use(Vuex);

export default new Vuex.Store({
    // 在state中去声明全局变量，可以通过 this.$store.state 访问
    state: {
        count: 0
    },
    // 在getters中声明state中变量的计算函数，缓存计算后的数据， 通过 this.$store.getters 调用
    getters: {
        // 接受state作为参数，每次 count发生变化时 ， 都会被调用
        consoleCount: state => {
            return state.count
        }
    },
    // 只能执行同步方法，不要去执行异步方法 通过 this.$store.commit 方法去调用
    mutations: {
        // 改变state状态的方法，不建议直接通过  
        // this.$store.state.? = ？的方式改变state中的状态
        addCount: state => {
            ++state.count;
        },
        // mutations的第一个参数即为 state对象，并且可以向mutation传入额外的参数
        addNumCount: (state, n) => {
            state.count+=n;
        },
    },
    // 借助actions的手去 执行 mutations ， 通过  this.$store.dispatch 的方式调用
    // 可以用来执行异步操作，可以跟踪异步数据状态变化
    actions: {
        addCount({commit}){
            // 调用 mutation
            commit('addCount')
        },

        addNumCount:({commit}, n)  {
            commit('addNumCount', n)
        }
    }
})

也可以通过以下方式来搭建VUEX：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
//分别创建state、getters、mutations、actions文件并在index。js进行声明

VUEX取值方式

图片2中，$store.state.dataTest为第一种取值方式，直接从state中取值；
oneWay，twoWay，dataTest这三种取值方式，都依赖于vue的computed的计算属性来实现：oneWay在computed中定义一个方法，并return出state对象中的属性及其状态；twoWay利用vuex的mapState方法来获取vuex的state对象中属性；dataTest同样是利用vuex的mapState方法来获取vuex的state对象中属性，只是方法不同（或许这两种方式有区别只是我不知道，欢迎各位批评指正）。dataStore则是通过getters接口获取值。

这里需要说明的是：因为store之前已经在mian.js中进行了全局引入（见上文），因此，在vue的组件中，就可以通过this.$store来调用，this代表vue实例。