vuex的使用

一、VUEX介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
二、使用方法
1、在项目中安装vuex

npm install --save vuex

2、在src文件下创建store文件
store/index.js

//配置vuex
import Vue from 'vue';
import Vuex from 'vuex';
//使用Vuex
Vue.use(Vuex);

//仓库存储数据的地方
const state={
    count:0,
};

//仅能在此处修改state中的数据
const mutations={
    ADD(state){
        state.count++;
    }
};

//可以写业务逻辑,异步
const actions={
    //可以书写业务逻辑不能直接修改state
    add({commit}){
        commit('ADD')

    }
};

//计算属性，用简化仓库数据
const  getters={};

//引入其他模块的小数据仓库
import home from './home';

//对外暴露一个Store类的实例
export default  new Vuex.Store({
    //实现vuex仓库模块式开发存储数据
    modules:{
        home
      },
   	state,
    mutations,
    actions,
    getters

})

3、注册store
main.js

	import store from './store'
	new Vue({
  		store, // 注册vuex的store对象  ==> 所有组件对象都有一	个$store属性
	})

4、使用获取数据

<script>
    import {mapState} from 'vuex';
    export default {
        mounted() {
            //通知vuex发起请求，派发任务到actions，获取数据，存在数据仓库中。
            this.$store.dispatch("add")
           
        },
        computed: {
            ...mapState({
                //从数据仓库中取值
                add: state => state.count
            }),
        },
    }
</script>

vuex的实现逻辑：组件派发任务到action，action触发mutations中的方法，mutations修改state中的数据。
强烈建议安装一下 vue-devtools插件 查看结构更方便快捷

三、适用于vuex的场景
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。