什么场景适合使用Vuex，保姆级使用流程

原创已于 2022-03-25 20:36:17 修改 · 3.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

于 2022-03-25 03:42:55 首次发布

Vue 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Vuex状态管理模式及其实现方式，包括何时使用Vuex、安装配置步骤及具体的使用流程，帮助开发者掌握Vue.js应用程序的状态管理。

3.2.1.在src目录下创建目录store，在该文件夹中分别创建：

4.2. Commit ——> Mutate （看图）

4.3.组件中获取数据

1.什么是Vuex？

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

2.什么情况下应该使用 Vuex？

如果不是大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。

但是，如果需要构建一个中大型单页应用，就需要考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

站在系统架构的角度上来，vuex虽然能很好帮助我们管理状态, 但随之也带来更多的概念让我们花时间来消化，总而言之，根据项目的实际大小来决定是否需要引入Vuex

3.引入Vuex

从图中我们可以看到vuex包含了3个关键词

state
actions
mutations

3.1.安装

npm install vuex@next --save   //npm
yarn add vuex@next --save      //Yarn

3.2.基本配置

3.2.1.在src目录下创建目录store，在该文件夹中分别创建：

index.js（或 store.js）,

search.js(search举例；这里就称为“仓库”，根据业务，必要时可以创建多个 )

3.2.2.index.js中

import Vue from  'vue'
//引入vuex
import Vuex from 'vuex';
//使用Vuex
Vue.use(Vuex);
//引入仓库
import search from './search.js';
//对外暴露Store类的实例
export default new Vuex.Store({
   //实现Vuex仓库模块化开发存储数据
   modules:{
       search
   }
})

3.2.3.search.js中

//state：数据仓库
const state = {
        
}

//actions:可以处理自己的业务逻辑，也可以异步
const actions = {

}

//mutations：修改state的唯一手段
const mutations = {

}

//getters: 用于简化仓库数据，相当于计算属性
const getters = {

}

//对外暴露
export default {
    state,
    mutations,
    actions,
    getters,
}

3.2.4.mian.js中

import store from './store'

new Vue({
  el: '#app',
  router,
  store, // vuex store
  components: { App },
  template: '<App/>'
})

4.详细的使用Vuex流程

4.1.Dispatch（看上图）


<template>某组件</template>

<script>
  export default {
    name: 'Search',
    data() {
      return {
        searchParams:{
        }
      }
    },
    methods:{
      getData() {
           this.$store.dispatch('getSearchList',this.searchParams)
            //'getSearchList'  => 方法名
            //this.searchParams  => 携带参数，非必须
      },
    },
</script>

<style></style>

4.2. Commit ——> Mutate （看图）

const state = {
        //初始数据，这里就数组类型举例
       searchList:[]
}

const actions = {
        commit('GETSEARCHLIST',result.data)
            //方法名   携带参数 
            //一般的，actions中发送ajax请求，result.data即ajax请求返回的数据
    }
}

const mutations = {
    //actions中的对应方法名
    GETSEARCHLIST(state,searchList) {
        state.searchList = searchList;
    }
}

const getters = {
    
}

4.3.组件中获取数据

this.xxxx = this.$store.search.state.searchList     //search是对应仓库的名字

或者在仓库中存储数据

this.$store.search.state.searchList = this.xxxx  //search是对应仓库的名字