看完学会Vuex

如果你之前使用过vue.js，你一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，那么接下来我们就来学习一下vuex是如何修改状态值的：

先说说Vuex是什么

Vuex是一个专为Vue.js应用程序开发的状态管理模式

这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分，即Vuex进行统一集中式的管理需要共享的data

什么是“状态管理模式”

其包含一下几个部分：
- state：驱动应用的数据源
- view：以声明方式将state映射到视图
- actions：响应在view上的用户输入导致的状态变化
  下面是一个表示“单向数据流”理念的简单示意图

Vuex和单纯的全局对象有何不同？

1.Vuex的状态存储是响应式的

当Vuex组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应的得到高效更新

2.你不能直接改变store中的状态

改变store中的状态的唯一途径就是显示地提交（commit）mutation，方便我们跟踪每一个状态的变化

总结一下什么情况下我们应该使用Vuex？

适用于：
- 大小型单页应用，你可能会考虑如何让把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：
  - ①多个视图使用于同一个状态：传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
  - ②不同视图需要变更同一状态：采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码
不适用：
- 小型简单应用，用Vuex是繁琐冗余的，更适合使用简单的store模式

开始Vuex的使用吧

1.首先创建一个vue-cli项目

执行下面的命令，创建一个名称为app的项目

vue init webpack app

2.创建完成后，我们进入文件夹下，并且运行项目

cd app/
npm run dev

接下来我们在src目录下创建一个vuex文件夹再vuex文件夹下创建一个index.js文件

3.下载引入vuex

在命令行输入下面命令安装vuex

npm install vuex --sav

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    
})

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

state：

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state= {
    count: 0
}

export default new Vuex.Store({
    state
})

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

然后在任意组件中使用就能看到count了
这里我们在helloWorld中使用一下，去除helloworld.vue中不用的标签

打开刚才运行项目的浏览器，就可以看到已经使用成功了

并且在vue开发工具中我们可以看到我们定义的变量count

Mutations：

提交mutations修改count值,该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。

我们在mutations中定义两个方法，增加和减少，并且设置一个参数n，默认值为0

// index.js
const mutations = {
    mutationsAddCount(state, n = 0) {
        return (state.count += n)
    },
    mutationsReduceCount(state, n = 0) {
        return (state.count -= n)
    }
}
export default new Vuex.Store({
    state,
    mutations
})

helloworld.vue：