web前端vue：Vuex状态管理基本使用

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

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

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。如果你是开发一个大型的项目的我建议你使用它。但如果你只是做个很小型的项目的（应用够简单）话，就不建议你使用如果使用了的话会繁琐冗余。

第一次使用的话，你会觉地是多此一举绕多了一步的感觉还不如不用。
下面看个简单加剪的例子：

可以单独的新建一个js的文件store.js或者写在一个页面里如下：

<script>
import Vuex from 'Vuex'     // 在使用之前要先引入vuex
const store = new Vuex.Store({
    state: {
        count: 0  // 暂存
    },
    mutations: {
        increment: state => state.count++,  // 把加好的当前值保存起来
        decrement: state => state.count--   // 把剪去的当前值保存起来
      }
})

new Vue({
    computed: {
        count () {  // 获取
            return store.state.count  //获取值
        }
    },
methods: {
    increment () {
        store.commit('increment')   // 加的方法
    },
    decrement () {
        store.commit('decrement')  // 剪的方法
     }
     }
})
</script>

页面渲染部分：

    <div>{{ count }}</div>
    <div>
        <button @click="increment">加</button>   // 加
        <button @click="decrement">剪</button> // 剪
    </div>

这样一个简单的加减例子就写好了。

当真正的在写项目的话，建议这里单独的新建一个js文件来，更加的容易管理各种状态，也会更加的清晰理解。下一章我会拿一个更加复杂的例子为大家来讲解。

有喜欢vue或前端的同学可以加我（微信：nihaomeili87）我们一起进步