为何采用vuex?
vuex主要就是是做统计数据可视化，兄妹二人模块fork能很难看清楚，但兄妹模块间fork（兄妹模块下又有兄妹二人模块），或是小型spa单网页架构建设项目，网页多因此几层冗余几层的fork，极度麻烦事，用vuex来保护共计的状况或统计数据会变得游刃有余。
市场需求：三个模块A和B，vuex保护的公用统计数据是 餐厅的中文名称 resturantName,预设餐厅中文名称是 韩红餐厅，所以那时A和B网页表明的是韩红餐厅。假如A修改餐厅中文名称 为 A餐厅，则B网页表明的将会是 A餐厅，但若B修正但若亦然。这是vuex保护公用状况或统计数据的气质，在三个地方性修正了统计数据，在那个建设项目的其它网页单厢变为那个统计数据
①采用 vue-cli钢架辅助工具建立三个工程建设建设项目，工程建设产品目录，建立模块A和模块B路由器如下表所示：
路由器如下表所示：
import Vue from vue
import Router from vue–router
import componentsA from @/components/componentsA
import componentsB from @/components/componentsB
Vue.use(Router)
export default new Router({
mode: history,
routes: [
{
path: /,
name: componentsA,
component: componentsA
},
{
path: /componentsA,
name: componentsA,
component: componentsA
},
{
path: /componentsB,
name: componentsB,
component: componentsB
}
]
})
app.vue
<template>
<div id=“app”>
<router–view/>
</div>
</template>
<script>
export default {
name: App
}
</script>
<style>
#app {
font–family: Avenir, Helvetica, Arial, sans–serif;
–webkit–font–smoothing: antialiased;
–moz–osx–font–smoothing: grayscale;
text–align: center;
color: #2c3e50;
margin–top: 60px;
}
</style>
②开始采用vuex，新建三个 sotre文件夹，分开保护 actions mutations getters
②在store/index.js文件中新建vuex 的store实例
*as的意思是 导入那个文件里面的所有内容，就不用三个个实例来导入了。
import Vue from vue
import Vuex from vuex
import * as getters from ./getters // 导入响应的模块，*相当于引入了那个模块下所有导出的事例
import * as actions from ./actions
import * as mutations from ./mutations
Vue.use(Vuex)
// 首先声明三个需要全局保护的状况 state,比如 我这里举例的resturantName
const state = {
resturantName: 韩红餐厅 // 预设值
// id: xxx 假如还有全局状况也能在这里添加
// name:xxx
}
// 注册上面引入的各大模块
const store = new Vuex.Store({
state, // 共同保护的三个状况，state里面能是很多个全局状况
getters, //
actions, // 统计数据的异步操作
mutations // 处理统计数据的唯一途径，state的改变或赋值只能在这里
})
export default store // 导出store并在 main.js中引用注册。
③actions
// 给action注册事件处理函数。当那个函数被触发时候，将状况提交到mutations中处理
export function modifyAName({commit}, name) { // commit 提交；name即为点击后传递过来的参数，此时是 A餐馆
return commit (modifyAName, name)
}
export function modifyBName({commit}, name) {
return commit (modifyBName, name)
}
// ES6精简写法
// export const modifyAName = ({commit},name) => commit(modifyAName, name)
④mutations
// 提交 mutations是更改Vuex状况的唯一合法方法
export const modifyAName = (state, name) => { // A模块点击更改餐厅中文名称为 A餐厅
state.resturantName = name // 把方法传递过来的参数，赋值给state中的resturantName
}
export const modifyBName = (state, name) => { // B模块点击更改餐厅中文名称为 B餐厅
state.resturantName = name
}
⑤getters
//
export const resturantName = state => state.resturantName
⑥在main.js中导入 store实例
// The Vue build version to load with the `import` command
// (runtime–only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
import App from ./App
import router from ./router
import store from ./store
Vue.config.productionTip = false
/* eslint–disable no–new */
new Vue({
el: #app,
router,
store, // 这样就能全局采用vuex了
components: { App },
template: <App/>
})
④在模块A中，定义点击事件，点击 修正 餐厅的中文名称，并把餐厅的中文名称在事件中用参数进行传递。
…mapactions 和 …mapgetters都是vuex提供的语法糖，在底层已经封装好了，拿来就能用，简化了很多操作。
其中…mapActions([clickAFn]) 相当于this.$store.dispatch(clickAFn，{参数})，mapActions中只需要指定方法名即可，参数省略。
…mapGetters([resturantName])相当于this.$store.getters.resturantName
<template>
<div class=“componentsA”>
<P class=“title”>模块A</P>
<P class=“titleName”>餐厅中文名称：{{resturantName}}</P>
<div>
<!— 点击修正 为 A 餐厅 –>
<button class=“btn” @click=“modifyAName(A餐厅)”>修正为A餐厅</button>
</div>
<div class=“marTop”>
<button class=“btn” @click=“trunToB”>跳转到B网页</button>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters} from vuex
export default {
name: A,
data () {
return {
}
},
methods:{
…mapActions( // 语法糖
[modifyAName] // 相当于this.$store.dispatch(modifyName),提交那个方法
),
trunToB () {
this.$router.push({path: /componentsB}) // 路由器跳转到B
}
},
computed: {
…mapGetters([resturantName]) // 动态计算属性，相当于this.$store.getters.resturantName
}
}
</script>
<!— Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
.title,.titleName{
color: blue;
font–size: 20px;
}
.btn{
width: 160px;
height: 40px;
background–color: blue;
border: none;
outline: none;
color: #ffffff;
border–radius: 4px;
}
.marTop{
margin–top: 20px;
}
</style>
B模块但若亦然
<template>
<div class=“componentsB”>
<P class=“title”>模块B</P>
<P class=“titleName”>餐厅中文名称：{{resturantName}}</P>
<div>
<!— 点击修正 为 B 餐厅 –> <button class=“btn” @click=“modifyBName(B餐厅)”>修正为B餐厅</button>
</div>
<div class=“marTop”>
<button class=“btn” @click=“trunToA”>跳转到A网页</button>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters} from vuex
export default {
name: B,
data () {
return {
}
},
methods:{
…mapActions( // 语法糖
[modifyBName] // 相当于this.$store.dispatch(modifyName),提交那个方法
),
trunToA () {
this.$router.push({path: /componentsA}) // 路由器跳转到A
}
},
computed: {
…mapGetters([resturantName]) // 动态计算属性，相当于this.$store.getters.resturantName
}
}
</script>
<!— Add “scoped” attribute to limit CSS to this component only –><style scoped>
.title,.titleName{
color: red;
font–size: 20px;
}
.btn{
width: 160px;
height: 40px;
background–color: red;
border: none;
outline: none;
color: #ffffff;
border–radius: 4px;
}
.marTop{
margin–top: 20px;
}
</style>
最后：本文完全手打，如需转载请注明出处，谢谢，假如不明白的地方性欢迎给我留言哦。
github仓库地址：https://github.com/byla678/vuexdemo.git
作者：韩红Fly
原文：vuex最详尽完备的采用用语 – qq_35430000的博客 – CSDN博客
版权声明：本文为博主原创文章，转载请附上博文链接！
