Vuex

Vuex是做什么的？ 官方解释：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vux也集成到Vue的官方调试工具 devtools extension，提供了零配值的time-travel调试、状态快照导入导出等高级调试功能。

状态管理模式、集中式存储管理是什么？ 简单来说，把多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的vue实例中，让其他组件可以使用。Vuex就是为了提供响应式组件共享变量的管理插件。

vuex的单一状态树(单一数据源)：所有的东西放在一个vuex实例对象里面。

在vue项目中使用

1.安装(npm安装)

npm install vuex --save

2.创建store(仓库)文件包，方便统一管理 3.在store的index里面安装vuex插件

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

4.创建对象,并且导出

const store = new Vuex.Store({ }) export default store

5.挂载创建的对象(在外面的main.js中)

import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', store, render: h => h(App) })

store对象内部

const store = new Vuex.Store({ state:{ counter: 1000, }, mutations:{ decrement(state) { state.counter-- } }, actions:{ }, getters:{ powerCounter(state) { return state.counter * state.counter } }, modules: { a: moduleA, b: mudeleB } })

state

1.state(多方可get读取数据，但是只能特定地方set写数据):保存状态(组件变量)

取state里面的变量：

<h2>{{$store.state.counter}}</h2>

这里最好不要用来改变state里面的值，如果这样直接改值，就代表任何组件都可以对state进行修改，然后其他组件用state里面的数据时也就改变了，不再是单一状态管理了。(在mutations里面改值)

mutations

2.mutations：使用mutations里面定义的方法，在其他组件的methods里面取mutations里面的方法，然后直接用。

methods: { subtraction() { this.$store.commit('decrement') }, }

如果mutations里面方法有参数：

methods: { incrementCount(state, payload) { // console.log(count); state.counter += payload.count } }

使用的时候：

methods: { addCount(count) { payload: 负载 this.$store.commit('incrementCount', count) } }

getters

3.getters:可以看成store的属性计算(getters里面除了第一个参数state外，还有可以有第二个参数getters。) 在其他组件中使用：

<h2>{{$store.getters.powerCounter}}</h2>

如果想在getters里面接收其他参数，那么可以这样：

gettters:{ moreAgeStu(state) { // return function (age) { // return state.students.filter(s => s.age > age) // } return age => { return state.students.filter(s => s.age > age) } } }

外部使用

<h2>{{$store.getters.moreAgeStu(12)}}</h2>

actions

4.类似mutations；Actions 提交的是 mutation，而不是直接变更状态；Actions 可以包含任意异步操作(异步操作封装方法写在actions里面)。

这里关于异步和同步我的理解： 同步：刚刚打开一个网页的时候，会去请求html、css、js，这个时候如果没有完成，网页无法加载成功，也就是同步。 异步：网页打开后，假设点击后需要请求新的数据时，但是任然不影响网页其他，这个时候就是异步。

modules

5.mudules：在vuex中使用单一状态树，也就是只有一个store，所有这个store中可能会比较拥堵，这个时候可以对store里面的内容进行划分，所有可以在modules定义多个对象，每一个对象就是一个store。

modules: { a: moduleA, b: mudeleB }

这里对象a、b就是2个modules对象。 在每一个对象里面可以定以一个和store对象一样结构的

const modeulesA = { state: { name: 'zhangsan' }, mutations: { }, getters: { }, actions: { } }

使用a里面的数据：

<h2>{{$store.state.a.name}}</h2>