如何搭建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环境"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
