Vuex的理解与实践

Vuex是实现组件全局状态(数据)管理的一种机制, 可以方便的实现组件之间数据共享
首先, 我们来了解一下Vuex和全局变量的区别:

来看看vuex官网对vuex与全局对象两者的区别描述。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态
(state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

（1）vuex用于做状态管理，主要是应用于vue.js中管理数据状态的一个库，通过创建一个集中的数据存储，供程序中所有组件访问，实现组件之间的传值。并且一个组件的数据变化会映射到使用这个数据的其他组件。
（2）vuex由统一的方法修改数据，全局变量可以任意修改。
（3）全局变量多了会造成命名污染，vuex不会，同时解决了父组件与孙组件，以及兄弟组件之间通信的问题。

基本使用:

1. 安装vuex
2. 导入vuex, 创建store对象

import Vue from 'vue';
import vuex from 'vuex'
Vue.use(vuex);
const store = new vuex.Store({//创建store对象,对象中存放可全局共享的数据
    state:{//state中存放的就是需要全局共享的数据
        name:'helloVueX'
    },
    mutations:{
        setName(state){
            state.name = 'jack'
        }
    }
})
export default store;

同时在vue实例中挂载store

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

4. state
   state中存放的就是需要全局共享的数据, 在组件中可使用this.$store.state.name来获取属性值
5. mutations
   mutations是操作state数据的方法的集合(单个方法在这里统一叫mutation)，比如对该数据的修改、增加、删除等等。其中的方法都有两个参数:(state, payload)
   state是当前VueX对象中的state
   payload是是该方法在被调用时传递参数使用的
   调用方式1:
   在组件中设置值可以使用this.$store.commit('setName','David')轻松设置值, 如果不传payload参数, 也会调用mutation函数
   调用方式2:

//vue组件中:
import {mapMutations} from 'vuex'
//在vue的methods函数中
methods:{
	//使用该方法可以直接将vuex中名为setName的mutation函数映射到vue组件中, setName就变成了一个vue的普通函数
	...mapMutations(['setName']),
}

this.setName('David')//setName函数的调用

注意: 如果在组件中直接使用this.$router.state.name="David"的方法修改属性是不合法的, 需要使用mutations的方法来修改属性值
为什么?
①通过mutation方法可以监控所有数据的变化,同时也能使代码易于维护
注意: 如果项目不是十分庞大, 官方不建议使用vuex, 因为可能会增加代码复杂度, 全局变量完全能满足需求

6. getters
   在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。
   getter可以说是一个全局的computed,在vue中使用则使用以下写法:

this.$store.getters.xxx //(没有括号!)

store.js中

getters: {
        msg(state) {
            return state;
        }
    }

7. action
   用于存放一些公共异步函数
   列: 我想封装个公共的ajax函数

actions: {
        //ctx指向sstore本身,可以时使用 ctx.commit('xxx',data)来调用mutations中的函数
        axios(ctx, obj) {
            if (obj.url.indexOf("http://") == -1) {
                obj.url = state.host + obj.url
            }
            return new Promise((resolve, reject) => {
                if (!obj.params) obj.params = {};
                //if (!obj.noCookie) obj.params.cookie = this.cookie
                axios(obj).then(res => {
                    if (res.data.code == 200) {
                        resolve(res);
                    } else {
                        reject(res)
                    }
                }).catch(err => {
                    alert('服务出错,错误信息: ' + err)
                    reject(err)
                })
            })
        }
    }

在vue中使用该函数:

 this.$store.dispatch('axios',obj)//第一个参数是函数名, 第二个参数是函数需要传递的参数