如何搭建Vuex环境

这篇文章主要介绍了如何搭建Vuex环境的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何搭建Vuex环境文章都会有所收获，下面我们一起来看看吧。

1. 概念

Vuex 是一个专为vue.js应用程序开发的状态管理模式。在庞大的项目中，能够方便地集中式管理和维护组件之间频繁传递的data中的值，也是组件之间通信的方式，适用于任意组件间通信。

2. 工作流程

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接commit

3. 安装

npm i vuex //安装

4. 搭建Vuex环境

在main.js文件中创建Vue时传入store配置项

import Vue from 'vue'

import App from './App.vue'

import store from './store'

new Vue({

    el:'app',

    render: h => h(App),

    store,

})

创建store/index.js文件

import Vue from 'vue'

import Vuex from 'vuex' //引入

Vue.use(Vuex) //使用插件

//创建Vuex中最核心的store

const action = {} //用于响应组件中的动作

const mutations = {} //用于操作数据

const state = {} //用于存储数据

const getters = {} //可以认为是store的计算属性,对state中的数据加工

//创建并暴露store

export default new Vuex.Store({

    action,

    mutations,

    state,

    getters,

})

5. 基本使用

import Vue from 'vue'

import Vuex from 'vuex' //引入

Vue.use(Vuex) //使用插件

//创建Vuex中最核心的store

const action = {

    showName(context,value){

        context.commit('SHOWNAME',value) //context上下文中包含store

    }

}

/*

context:{

state,   等同于store.$state，若在模块中则为局部状态

rootState,   等同于store.$state,只存在模块中

commit,   等同于store.$commit

dispatch,   等同于store.$dispatch

getters   等同于store.$getters

}

常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的

位置写自己想要的属性，如：{commit}。

*/

const mutations = {

    SHOWNAME(state,value){

        state.name = value //改变store中的name为hello

    }

}

const state = {

    name: 'hello Vuex',

    age: 25,

}

const getters = {

    upName(state){

        return state.name = 'HELLO VUEX'

    }

}

//创建并暴露store

export default new Vuex.Store({

    action,

    mutations,

    state,

    getters,

})

在组件中使用Vuex

在视图(template)中，用 $store.state.name / this.$store.getters.upName ;

在脚本(script)中，用 this.$store.state.name / this.$store.getters.upName ;

用 this.$store.dispatch('showName','hello')调用action；

也可以直接用 this.$store.commit('SHOWNAME'，'hello')调用mutation。

6. 借助map使用

6.1 mapState和mapGetters

import {mapState，mapGetters} from 'vuex'

export default {

    data(){return {}},

    computed:{

        //借助mapState生成计算属性，从state中读取数据

        ...mapState({mingzi:'name',nianling:'age'})  //对象写法

        /* 

          mingzi(){return this.$store.state.name}

         nianling(){return this.$store.state.name}

        */

        ...mapState(['name','age']) //数组写法

        /* 

          name(){return this.$store.state.name}

          age(){return this.$store.state.name}

        */

        //借助mapGetters生成计算属性，从getters中读取数据

        ...mapGetters({upName:'upName'}) //对象写法

        ...mapGetters(['upName']) //数组写法

       /*

          upName(){return this.$store.getters.upName}

        */

    }

}

6.2 mapActions和mapMutations

import {mapActions，mapMutations} from 'vuex'

export default {

    data(){return {}},

    methods:{

        //借助mapActions生成actions方法，即包含this.$store.dispatch(xxx)的函数

        ...mapActions({showName:'showName'}) //对象写法

        ...mapActions(['showName']) //数组写法

        //借助mapMutations生成mutations方法，即包含this.$store.commit(xxx)的函数

        ...mapMutations({showName:'SHOWNAME'}) //对象写法

        ...mapMutations(['SHOWNAME']) //数组写法

    }

}

备注：mapActions和mapMutations使用时，若需要传递参数，在模板中绑定事件时传递好参数，否则参数是事件对象。

7. 模块化

一些规则：

应用层级的状态应该集中到单个 store 对象中。

提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

异步逻辑都应该封装到 action 里面。

├── 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环境”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何搭建Vuex环境”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。