学习vuex

布满荆棘的人生 2022-03-09 03:51 225阅读 0赞

## 概念： ##

主要应用于Vue.js中管理数据状态的一个库  
通过创建一个集中的数据存储,供程序中所有组件访问  
跨组件修改状态  
平常的可能会涉及到多个组件公用一套数据，使用vuex进行中央状态管理

## 具体内容： ##

### store ###

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export const store = new Vuex.Store({ 
    	//要管理的公共数据在里边定义，相当于普通vue中定义的data
    	state:{ 
    		isShow:false
    	}，
        //定义修改数据的方法
        mutations：{ 
            changeShow(){ 
                //调用数据的时候，不是直接掉，而是this.state
                this.state.isShow=!this.state.isShow
            }
    	}，                                
        strict:true,
    });

其他组件调用：

<div v-if="$store.state.isShow">要展示的内容</div>
    
    
    <Button @click="$store.commit('changeShow')"></Button>
    
    //使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

#### 注意：Mutation 必须是同步函数 ####

当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

### Getter ###

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

const store = new Vuex.Store({ 
      state: { 
        todos: [
          {  id: 1, text: '...', done: true },
          {  id: 2, text: '...', done: false }
        ]
      },
      getters: { 
        doneTodos: state => { 
          return state.todos.filter(todo => todo.done)
        }
      }
    })

#### 通过属性访问 ####

Getter 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作为第二个参数：

getters: { 
      // ...
      doneTodosCount: (state, getters) => { 
        return getters.doneTodos.length
      }
    }
    store.getters.doneTodosCount // -> 1

我们可以很容易地在任何组件中使用它：

computed: { 
      doneTodosCount () { 
        return this.$store.getters.doneTodosCount
      }
    }

注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

#### 通过方法访问 ####

你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

getters: { 
      // ...
      getTodoById: (state) => (id) => { 
        return state.todos.find(todo => todo.id === id)
      }
    }
    store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

### Action ###

Action 类似于 mutation，不同在于：

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

一个简单的 action：

const store = new Vuex.Store({ 
      state: { 
        count: 0
      },
      mutations: { 
        increment (state) { 
          state.count++
        }
      },
      actions: { 
        increment (context) { 
          context.commit('increment')
        }
      }
    })

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 `context.commit` 提交一个 mutation，或者通过 `context.state` 和 `context.getters` 来获取 state 和 getters。

es6简化代码（特别是我们需要调用 `commit` 很多次的时候）：

actions: { 
      increment ({  commit }) { 
        commit('increment')
      }
    }

#### 分发 Action ####

Action 通过 `store.dispatch` 方法触发：

store.dispatch('increment')

我们可以在 action 内部执行**异步**操作：

actions: { 
      incrementAsync ({  commit }) { 
        setTimeout(() => { 
          commit('increment')
        }, 1000)
      }
    }

Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
    store.dispatch('incrementAsync', { 
      amount: 10
    })
    
    // 以对象形式分发
    store.dispatch({ 
      type: 'incrementAsync',
      amount: 10
    })

一个 `store.dispatch` 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

### 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 对象中。
2.  提交 **mutation** 是更改状态的唯一方法，并且这个过程是同步的。
3.  异步逻辑都应该封装到 **action** 里面。
4.  如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

├── index.html
    ├── main.js
    ├── api
    │   └── ... # 抽取出API请求
    ├── components
    │   ├── App.vue
    │   └── ...
    └── store
        ├── index.js          # 我们组装模块并导出 store 的地方
        ├── actions.js        # 根级别的 action
        ├── mutations.js      # 根级别的 mutation
        └── modules
            ├── cart.js       # 购物车模块
            └── products.js   # 产品模块

# 插件 #

Vuex 插件就是一个函数，它接收 store 作为唯一参数：

const myPlugin = store => { 
      // 当 store 初始化后调用
      store.subscribe((mutation, state) => { 
        // 每次 mutation 之后调用
        // mutation 的格式为 { type, payload }
      })
    }

然后像这样使用：

const store = new Vuex.Store({ 
      // ...
      plugins: [myPlugin]
    })

### 在插件内提交 Mutation ###

在插件中不允许直接修改状态——类似于组件，只能通过提交 mutation 来触发变化。  
比如不可以通过input标签修改v-model的值，参考下边一个关于表单的处理

### 生成 State 快照 ###

有时候插件需要获得状态的“快照”，比较改变的前后状态。想要实现这项功能，你需要对状态对象进行深拷贝：

const myPluginWithSnapshot = store => { 
      let prevState = _.cloneDeep(store.state)
      store.subscribe((mutation, state) => { 
        let nextState = _.cloneDeep(state)
    
        // 比较 prevState 和 nextState...
    
        // 保存状态，用于下一次 mutation
        prevState = nextState
      })
    }

生成状态快照的插件应该只在开发阶段使用，使用 webpack 或 Browserify，让构建工具帮我们处理：

const store = new Vuex.Store({ 
      // ...
      plugins: process.env.NODE_ENV !== 'production'
        ? [myPluginWithSnapshot]
        : []
    })

上面插件会默认启用。在发布阶段，你需要使用 webpack 的 DefinePlugin 或者是 Browserify 的 envify 使 process.env.NODE\_ENV !== ‘production’ 为 false。

### 内置 Logger 插件 ###

Vuex 自带一个日志插件用于一般的调试:

import createLogger from 'vuex/dist/logger'
    
    const store = new Vuex.Store({ 
      plugins: [createLogger()]
    })

`createLogger` 函数有几个配置项：

const logger = createLogger({ 
      collapsed: false, // 自动展开记录的 mutation
      filter (mutation, stateBefore, stateAfter) { 
        // 若 mutation 需要被记录，就让它返回 true 即可
        // 顺便，`mutation` 是个 { type, payload } 对象
        return mutation.type !== "aBlacklistedMutation"
      },
      transformer (state) { 
        // 在开始记录之前转换状态
        // 例如，只返回指定的子树
        return state.subTree
      },
      mutationTransformer (mutation) { 
        // mutation 按照 { type, payload } 格式记录
        // 我们可以按任意方式格式化
        return mutation.type
      },
      logger: console, // 自定义 console 实现，默认为 `console`
    })

日志插件还可以直接通过 `<script>` 标签引入，它会提供全局方法 `createVuexLogger`。

要注意，logger 插件会生成状态快照，所以仅在**开发环境**使用。

# 严格模式 #

开启严格模式，仅需在创建 store 的时候传入 `strict: true`：

const store = new Vuex.Store({ 
      // ...
      strict: true
    })

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

\*\*注：不要在发布环境下启用严格模式！\*\*严格模式会深度监测状态树来检测不合规的状态变更

# 热重载 #

热重载就是页面每次改动，不需要手动去刷新，可自动刷新。

hot: true,
    inline: true,

# 表单处理 #

在用户输入时，`v-model` 会试图直接修改 `obj.message`。在严格模式中，由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误。

\*\*解决方法：\*\*给 `<input>` 中绑定 value，然后侦听 `input` 或者 `change`事件，在事件回调中调用 action:

<input :value="message" @input="updateMessage">
    // ...
    computed: { 
      ...mapState({ 
        message: state => state.obj.message
      })
    },
    methods: { 
      updateMessage (e) { 
        this.$store.commit('updateMessage', e.target.value)
      }
    }

下面是 mutation 函数：

// ...
    mutations: { 
      updateMessage (state, message) { 
        state.obj.message = message
      }
    }

### 双向绑定的计算属性 ###

另一个方法是**使用带有 setter 的双向绑定计算属性**：

<input v-model="message">
    // ...
    computed: {
      message: {
        get () {
          return this.$store.state.obj.message
        },
        set (value) {
          this.$store.commit('updateMessage', value)
        }
      }
    }