首页 ›  文章

vue-cli项目踩坑

2019-12-03

h(App), }).$mount('#app')

## vuex相关配置以及使用

`由于我们在日常开发过程经常会遇到组建间通讯,当然。vue.js中父子通信,通常父组建通过props传值,子组建通过自定义事件¥emit来触发等,包括父孙通讯使用provide / inject,但多业务模块并且不同模块间数据并不相干,通过拆vuex拆成多个module方便代码维护;并且也会使各功能模块高内聚低耦合`

![](https://img.javascriptcn.com/3ec483d1ea74fd9fb2ef225f56dd9d66)

1.  安装vuex。
2.  在src路径创建store.js
3.  自定义state数据,添加mutations操作函数,编写触发actions函数
4.  main.js引入vuex
5.  最后引入的名字必须是store
6.  页面中引入mapActions,将定义好的方法引入进来;

![](https://img.javascriptcn.com/8b52df4f8e2fe5881283e16a86b9a1be)

`store.js`

yarn add vuex

touch src/store.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state={ count:1 } const mutations={ increment(state) { state.count++ }, decrement(state) { state.count-- } } const actions={ increment: ({ commit }) => { commit('increment') }, decrement: ({ commit }) => { commit('decrement') } } export default new Vuex.Store({ state, mutations, actions })

`main.js`

import Vue from 'vue' import App from './App.vue' import './directive/n' import router from './router' import store from './store/index' Vue.config.productionTip = false

new Vue({ router, store, render: h => h(App), }).$mount('#app')

`a.vue`
<template>
vuex {{$store.state.count}}
<button @click="increment">增加</button> <button @click="decrement">删减</button>
</template> <script> import { mapActions } from 'vuex' export default { methods:{ ...mapActions([ 'increment', 'decrement' ]) } } </script>
1.  首先在store文件下创建index.js和modules文件夹,里面可以写入我们业务所需要的各模块的组建,比如(a.js,b.js)
2.  自定义state数据,添加mutations操作函数,编写触发actions函数,导出我们所定义的内容。此时记得导出添加namespaced:true;
3.  在index.js中导入我们创建的(a,b)js文件。这里我们使用modules导出我们创建的组件内容
4.  页面中引用引入mapActions。通过methods将方法导入.
5.  通过用户操作行为触发action
6.  action触发之后,mutations去操作改变变数据。最后state更新改变后的数据,vue组建的内容更新;

![](https://img.javascriptcn.com/823989fd40008d4c2b034cf712ab7e5d)

mkdir src/store

mkdir src/store/modules

touch src/store/modules/a.js

touch src/store/modules/b.js

touch src/store/index.js

`a.js`

const state = { count: 1 } const mutations = { add(state) { state.count++ }, reduce(state) { state.count-- } } const actions = { add: ({ commit }) => { commit('add') }, reduce: ({ commit }) => { commit('reduce') } } export default { namespaced: true, state, mutations, actions }

`b.js`

]const state = { money: 1 } const mutations = { add(state) { state.money++ }, reduce(state) { state.money-- } } const actions = { add: ({ commit }) => { commit('add') }, reduce: ({ commit }) => { commit('reduce') } } export default { namespaced: true, state, mutations, actions }

`index.js`

import Vue from 'vue' import Vuex from 'vuex' import money from './modules/b' import count from './modules/a' Vue.use(Vuex) export default new Vuex.Store({ modules: { money, count } })

`vue页面中使用`
<template>
vuex {{$store.state.count.count}}
<button @click="add">增加</button> <button @click="reduce">减少</button>
</template> <script> import { mapActions } from 'vuex' export default { methods: { ...mapActions('count', [ 'add', 'reduce' ]) } } </script> ```
  1. 只需在事件函数中传参
  2. mutations去做操作即可

vue页面

``` <template>

vuex {{$store.state.count.count}}
<button @click="add(3)">增加</button> <button @click="reduce">减少</button>
</template>

<script> import { mapActions } from 'vuex' export default { methods: { ...mapActions('count', [ 'add', 'reduce' ]) } }
原文链接:segmentfault.com

上一篇:两年前端头条面试记
下一篇:支付宝海外银行招前端,坑多速来!P6/P7均可哦
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入