十二、 Vuex 状态管理_综合

一、Vuex 概述

1. 官方文档：https://vuex.vuejs.org/zh/Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. Vuex简单理解： Vue 应用中的每个组件在 data() 中封装着自己数据属性，而这些 data 属性都是私有的，完全隔离的。如果我们希望多个组件都能读取到同一状态数据属性，或者不同组件的行为需要更新同一状态数据属性，这就需要一个将共享的状态数据属性进行集中式的管理。这就是 Vuex 状态管理所要解决的问题。

3.上面复制的，我写不出这么深刻的理解。

二、整整试试

1.先创建一个Vue项目，手动安装，vuex Router ,2.x版本然后一顿回车，哈哈哈

2.然后运行一下服务

3.面试爱问：每一个 Vuex 应用的核心就是 store（仓库）

4.在store文件下的index.js中添加 count: 0：

export default new Vuex.Store({state: {count: 0},mutations: {},actions: {},modules: {}
})

5.然后让他在页面中显示，找到views的home.vue：

<template><div class="home"><h1>1111</h1><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template>

6.效果：

7.用{ {$store.state}}来获取状态对象，

<template><div class="home"><h1>{
   {$store.state.count}}</h1><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template>

8.效果：

9.我们可以改变一下这个值count，通过mutations，回到store文件下的index.js中：

 mutations: {increment(state) {state.count++},decrement(state) {state.count--}},

10.再回到views的home.vue：

<template><div class="home"><h1>{
   {$store.state.count}}</h1><button @click="add">++</button><button @click="decrement">--</button><HelloWorld msg="Welcome to Your Vue.js App"/></div>
</template>

11.在export default里添加方法：

export default {name: "Home",components: {HelloWorld,},methods: {add() {},decrement() {},},
};

12.官网--可以从组件的方法提交一个变更-----this.$store.commit：

methods: {add() {this.$store.commit("increment");},decrement() {this.$store.commit("decrement");},},

13.现在可以实现点击++时，0++，点击--时，0--

14.就像官网所说，store当成一个仓库，然后通过在组件中去调用它的内部的方法，来实现对它的改动。

三、试试奥----mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，不能直接调用一个 mutation，需要以相应的 type 调用 store.commit 方法

1.那么，我们可不可以在其他组件中使用它呢，在views的about.vue中，

<template><div class="about"><h1>{
   { $store.state.count }}</h1></div>
</template>

2.结果发现也能拿到。

3.那么，我们可不可以在添加一个新值呢，加一个n,回到store文件下的index.js中：

 mutations: {increment(state, n) {state.count += n},decrement(state) {state.count--}},

在回到views的home.vue：

 methods: {add() {this.$store.commit("increment",10);},decrement() {this.$store.commit("decrement");},},

4.结果发现也能拿到。这叫载荷，可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

四、Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

1.在store文件下的index.js中：

    actions: {dec({ commit }) {commit("decrement")},},

2.在组件中使用 this.$store.dispatch('xxx') 分发 action，在回到views的home.vue：

decrement() {// this.$store.commit("decrement");this.$store.dispatch('dec')},

3.测试可以实现减操作。

4.在Action中,结构赋值形式添加一个新值，在store文件下的index.js中：

add({ commit }) {commit("increment", 10)}

在回到views的home.vue：

 add() {// this.$store.commit("increment",10);this.$store.dispatch('add')},

5.测试可以实现加10操作。

6.默认形式添加一个新值，在store文件下的index.js中，把原来的add()注释上，添加：

 add(contxt) {contxt.commit("increment", 10)}

7.测试发现也可以实现加10操作。

五、派生属性 getter

1. 理解：

有时候我们需要从 store 中的 state 中派生出一些状态。例如：基于上面代码，增加一个 desc 属性，当 count 值小于 50，则 desc 值为吃饭 ; 大于等于 50 小于100，则desc 值为睡觉 ; 大于100 , 则 desc 值为打豆豆。这时我们就需要用到 getter 为我们解决。getter 其实就类似于计算属性(get)的对象.组件中读取 $store.getters.xxx

2.实操

修改 store\index.js ,增加 getters 选项注意：getters 中接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数

getters: {desc(state) {if (state.count < 50) {return "吃饭"} else if (state.count < 100) {return "睡觉"} else {return "打豆豆"}}}

修改 views\Home.vue, 显示派生属性的值：

<template><div class="home"><h1>{
   { $store.state.count }}</h1><h2>{
   {$store.getters.desc}}</h2><button @click="add">++</button><button @click="decrement">--</button><HelloWorld msg="Welcome to Your Vue.js App" /></div>
</template>

3.效果：

六、Module模块化项目结构

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter 等，参见以下代码模型

const moduleA = {

state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... }

}

const moduleB = {

state: { ... }, mutations: { ... }, actions: { ... }

}

const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } })

store.state.a // -> moduleA 的状态

store.state.b // -> moduleB 的状态

1.举个例子，修改 store\index.js：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)let A = {state: {count: 0}, //存值// 下面都是方法mutations: {increment(state, n) {state.count += n},decrement(state, n) {state.count -= n}},actions: {dec({ commit }) {commit("decrement", 10)},// add({ commit }) {//     commit("increment", 10)// },add(contxt) {contxt.commit("increment", 10)}},getters: {desc(state) {if (state.count < 50) {return "吃饭"} else if (state.count < 100) {return "睡觉"} else {return "打豆豆"}}}
}export default new Vuex.Store({modules: {a: A},})

2.修改views\Home.vue：

<template><div class="home"><h1>{
   { $store.state.count }}</h1><h2>{
   {$store.getters.desc}}</h2><h3>{
   {$store.state.a.count}}</h3><button @click="add">++</button><button @click="decrement">--</button><HelloWorld msg="Welcome to Your Vue.js App" /></div>
</template>

3.效果：

4.为了保证变量重复的情况下也能使用，我们在index.js中引入，使它变成局部作用：

namespaced: true,

5.在home.vue中：

methods: {add() {// this.$store.commit("increment",10);this.$store.dispatch('a/add')},decrement() {// this.$store.commit("decrement");this.$store.dispatch('a/dec')},},

6.效果：

7.在创建一个变量B：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)let A = {namespaced: true,state: {count: 0}, //存值// 下面都是方法mutations: {increment(state, n) {state.count += n},decrement(state, n) {state.count -= n}},actions: {dec({ commit }) {commit("decrement", 10)},// add({ commit }) {//     commit("increment", 10)// },add(contxt) {contxt.commit("increment", 10)}},getters: {desc(state) {if (state.count < 50) {return "吃饭"} else if (state.count < 100) {return "睡觉"} else {return "打豆豆"}}}
}let B = {namespaced: true,state: {count: 0}, //存值// 下面都是方法mutations: {increment(state, n) {state.count += n},decrement(state, n) {state.count -= n}},actions: {dec({ commit }) {commit("decrement", 10)},// add({ commit }) {//     commit("increment", 10)// },add(contxt) {contxt.commit("increment", 10)}},getters: {desc(state) {if (state.count < 50) {return "吃饭"} else if (state.count < 100) {return "睡觉"} else {return "打豆豆"}}}
}export default new Vuex.Store({modules: {a: A,b: B},})

在home.vue：

<template><div class="home"><h1>{
   { $store.state.count }}</h1><h2>{
   {$store.getters.desc}}</h2><h3>{
   {$store.state.a.count}}</h3><h3>{
   {$store.state.b.count}}</h3><button @click="add">++</button><button @click="decrement">--</button><HelloWorld msg="Welcome to Your Vue.js App" /></div>
</template>

修改方法：

 methods: {add() {// this.$store.commit("increment",10);this.$store.dispatch("a/add");this.$store.dispatch("b/add");},decrement() {// this.$store.commit("decrement");this.$store.dispatch("a/dec");this.$store.dispatch("b/dec");},},

8.效果：

七、标准项目结构

如果所有的状态都写在一个 js 中，这个 js 必定会很臃肿，Vuex 并不限制你的代码结构。但是它建议你按以下代码结构来构建项目结构:

1. 重构项目结构

1. 1在src下新建一个newStore文件夹，在此文件夹下创建 index.js,actions.js,mutations.js和modules 目录，在该目录下创建 demo1.js 和demo2.js

demo1.js：

let A = {namespaced: true,state: {count: 0}, //存值// 下面都是方法mutations: {increment(state, n) {state.count += n},decrement(state, n) {state.count -= n}},actions: AA,getters: {desc(state) {if (state.count < 50) {return "吃饭"} else if (state.count < 100) {return "睡觉"} else {return "打豆豆"}}}
}
export default A

demo2.js ：

let B = {namespaced: true,state: {count: 0}, //存值// 下面都是方法mutations: {increment(state, n) {state.count += n},decrement(state, n) {state.count -= n}},actions: {dec({ commit }) {commit("decrement", 10)},// add({ commit }) {//     commit("increment", 10)// },add(contxt) {contxt.commit("increment", 10)}},getters: {desc(state) {if (state.count < 50) {return "吃饭"} else if (state.count < 100) {return "睡觉"} else {return "打豆豆"}}}
}
export default B

newStore\index.js：

import Vue from 'vue'
import Vuex from 'vuex'import A from './modules/demo1.js'
import B from './modules/demo2.js'Vue.use(Vuex)export default new Vuex.Store({modules: {a: A,b: B},})

在main.js中把原来的注释上，导入新的store，也就是newStore:

import store from './newStore'

在actions.js中：

let AA = {dec({ commit }) {commit("decrement", 10)},add(contxt) {contxt.commit("increment", 10)}
}
export { AA }

2. 正常访问, 与重构前一样

十二、 Vuex 状态管理