Vuex 结合 iview 做个加法器

一、iview 框架的使用

安装依赖：

npm install --save iview

打包时的入口文件，main.js 引用使用：

import iview from "iview";
Vue.use(iview);

为了提高 webpack 打包的速度，我们把 CSS 文件给提取出来放到 index.html 里面，使用 link 标签引入。我们的找到 iview 框架，CSS 样式所在的位置，它的位置就在 node_modules\iview ，在这个文件夹里面找到 styles 这个文件夹，复制到 index.html 同级目录下，之所以要整个样式文件夹是因为里面还有内置的字体，这时打开 index.html 引入这个样式表。
index.html ：

  <link rel="stylesheet" href="./styles/iview.css">

到此，配置全部完成。

二、Vuex 安装

安装依赖：

npm install --save vuex

改变入口文件 main.js：

import Vue from "vue";
import App from "./App";
import Vuex from "vuex";
import iview from 'iview';
import store from "./store/index";
// Vuex作为插件使用
Vue.use(Vuex);
// iview作为插件使用
// 子组件可直接使用iview里面的组件
Vue.use(iview);

new Vue({
    el:"#app",
    render(h){
        return h(App);
    },
    store:new Vuex.Store(store)
});

最后使用此 store:new Vuex.Store(store) 代码，就能做到子组件均可访问 store 里面值。

三、Vuex 的 countstore 和 index

countstore.js 文件里面的配置是特别像 react 的 dva。这个文件里面主要负责数据，和监听。一共由四部分组成。
countstore.js

export default {
    // 命名空间
    namespaced: true,
    // 数据
    state: {
        a: 10
    },
     // 所有可能对数据的改变
    mutations: {
        // 同步
        // commit触发
        add(state,action){
            // state是数据，action表示载荷
            console.log("我是" + action.palyload);
            state.a ++;
        }
    },
    actions: {
        // 异步
        // dispatch触发
        ADD({state,commit},action) {
            console.log("我是" + action.palyload);
            setTimeout(function(){
                commit("add");
            },2000);
        }
    }
};

index.js 文件里面的内容，是为了防止出现多个 countstore.js ，在这个文件里面进行一次合并。

import countstore from "./countstore.js";

export default {
    modules : {
        countstore
    }
}

这时引入入口文件。通过 store:new Vuex.Store(store) 这个代码即可使用，子组件可以通识状态容器。

四、加法器和延迟加法器

利用上面配置好的 iview 框架和 vuex 来做个加法器。App.vue 组件里面的业务代码：

<template>
    <div>
        <h1>{{$store.state.countstore.a}}</h1>
        <Button @click = "$store.commit('countstore/add',{'palyload':'同步载荷'})">同步加一</Button>
        <Button @click = "$store.dispatch('countstore/ADD',{'palyload':'异步载荷'})">异步加一</Button>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

此时浏览器运行的效果：

加法器