Vuex中state状态

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

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view
  上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

话不多说，接下来我们就看如何使用Vuex。

首先我们需要安装Vuex，执行命令 npm install vuex --save；

然后我们新建一个store.js文件，跟main.js处于同一级目录，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const  store = new Vuex.Store({
       //状态
        state: {
          count: 0
        },
        //改变状态的方法
        mutations: {
          increment (state) {
            state.count++
          },
          decrement (state) {
            state.count--
          }
        }
      })
export default store

然后我们需要修改main.js:

 import store from "./store.js"
//注入store机制，子组件  通过this.$store访问
 new Vue({
  store,
  el: '#app'
})

我们在页面中展示状态最简单的方法就是通过computed计算属性，关键代码如下：

<div>
    {{count}}
   <el-button @click="increment">加一</el-button>
   <el-button @click="decrement">减一</el-button>
  </div>
   //计算属性
    computed: {
        count() {
          return this.$store.state.count
        }
      },
      methods: {
        increment(e) {
        // 执行store.js中的increment函数
          this.$store.commit('increment')
        },
        decrement() {
        // 执行store.js中的decrement函数
          this.$store.commit('decrement')
        },

这里用计算属性computed获取状态值的原因是，当你后期提交 (commit) mutation改变store中的状态值时，页面的内容会实时刷新，你也可以使用watch()监听事件。

实现效果如下：