【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