VUEX详解

VUEX详解

一、vuex的简介

Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、优点

Vuex状态管理跟使用传统全局变量的不同之处：

1. Vuex的状态存储是响应式的： 就是当你的组件使用到了这个 Vuex
   的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

2. 不能直接修改Vuex的状态： 如果是个全局对象变量，要修改很容易，但是在 Vuex 中不能这样做，想修改就得使用 Vuex
   提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

三、使用步骤

1. 安装Vuex

npm install vuex --save

2. 引用Vuex

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

3. 创建仓库Store
要使用 Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

 //创建一个 store
 const store = new Vuex.Store({
   });

四、包含模块

• State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
• Getter：允许组件从 store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter映射到局部计算属性（state的计算属性）。
• Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
• Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
• Module：可以将 store 分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块(将store模块化）

vuex的结构示意图如下：

五、一个完整的Store的结构

const store = new Vuex.Store({
   
  state:{
   
    //存放状态
  },
  getters:{
   
    //state的计算属性
  },
  mutations: {
   
    //更改state中状态的逻辑，同步操作
  },
  actions: {
   
    //提交mutation,异步操作
  },
  //如果将store分成一个个的模块的话，则需要用到modules.
  //然后在每一个module中的state,getters，mutations,actions等
  modules: {
   
    a: moduleA,
    b: moduleB,
    //...
  }
});

六、如何在组件中获取vuex

vuex状态是响应式的，所以从store中读取状态的方法是在组件的计算属性中返回某个状态！

import store from 'store';
const Counter = {
   
  template:`<div>{
    { count }}`,
  computed: {
   
    count () {
   
    //去获取store中的状态
      return store.state.count;
    }
 }
}

根据以上的步骤组件中的状态就与store的状态关联起来了。每当store.state.count发生改变时，都会重新求取计算属性，从而去更新DOM。

每个组件都需要反复倒入store。可以将store注入到vue实例对象中去，这样每一个组件中都需要直接去获取store中的状态，而不需要反复导入store了

const app = new Vue({
   
  el: '#app',
  //把store对象注入到vue中去了
  store,
  components: {
    Counter},
  template: `<div>
                 <counter></counter>
             <div>
` 
});

上面的代码可以在组件中使用this.$store.count访问到state里面的count这个状态

const Counter = {
   
  template: `<div>{
    { count }}</div>`,
  computed: {
   
    count ()