vue-cli项目踩坑

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`
vuex {{$store.state.count}}
增加 删减
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页面中使用`
vuex {{$store.state.count.count}}
增加 减少
```
  1. 只需在事件函数中传参
  2. mutations去做操作即可

vue页面

```

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

原文链接:segmentfault.com

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

相关推荐

官方社区

扫码加入 JavaScript 社区