【vuex入门系列01】实战操做加减法案例对vuex感知

---

官方文档

https://vuex.vuejs.org/zh-cn/

如下操做所有放在了这个项目当中

https://github.com/itguide/vu...

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态：驱动应用的数据源

想一想一下，angular里面的service
controller -> service
在service 里面请求api
在controller里面调用service
service1
好比

controller1 -> service1
controller2 -> service1

若是你把驱动应用的数据源如今写在一个组件里面，只针对这个组件来用。
若是写在vuex里面的state 里面，任何组件均可以调用。

什么状况下我应该使用 Vuex？

虽然 Vuex 能够帮助咱们管理共享状态，但也附带了更多的概念和框架。这须要对短时间和长期效益进行权衡。

若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。可是，若是您须要构建是一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。引用 Redux 的做者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道何时须要它。

使用方式

如下操做所有放在了这个项目当中

https://github.com/itguide/vu...

vuex 安装

安装方式1：使用NPM

npm install vuex --save

安装方式2：使用yarn

yarn add vuex

在vuexbase项目中使用

在一个模块化的打包系统中，您必须显式地经过 Vue.use() 来安装 Vuex：

初始化项目

vue init webpack vuexbase

在项目文件中src里面

建立一个文件 stroe

在store 里面新建一个index.js

index.js 文件内容以下

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

Vue.use(Vuex)

let store = new Vuex.Store({
    state: {
        num: 100
    }
})

export default store

在src/main.js 里面引入 vuex

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' //引入vuex

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,  // 须要在添加
    template: '<App/>',
    components: { App }
})

devtoos vue工具地址

https://chrome.google.com/web...

建立一个组件

Increment.vue

<template> 
    <div>
        <h2>加减法计算器</h2>
        <div>
            <input type="button" value="-" @click="minHandle"/>
                <span>{{num}}</span>
            <input type="button" value="+" @click="addHandle"/>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                // num:100
                num: this.$store.state.num,
            }
        },
        methods:{
            addHandle(){
                this.num += 5;
            },
            minHandle(){
                this.num -= 5;
            }
        }
    }
</script>

修改一些路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Increment from '@/components/Increment'

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        name: 'Hello',
        component: Increment
    }]
})

vuex的状态在组件里面怎么调用？

$store 在main里面引入了以后，记得在
在这个里面加入
new Vue({
    el: '#app',
    router,
    store,  // 须要在添加
    template: '<App/>',
    components: { App }
})

在组件调用方式：
this.$store.state.num

此时就运行项目会发现以下
npm run dev