效果图
vuex实例效果图.png
vuex是专门为vue.js应用开发的状态管理模式。详细学习可查看 vuex官网,安装vuex命令：npm install vuex --save
在此是运用vue+vuex+vue-router写了一个简单的加减乘除实例。具体详解如下：
1:编写app.vue,添加导航：
```
<li><router-link to="/vuexstore/comp1">Vuex示例</router-link></li>
```
2:编写vuexstroe.vue
<template>
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-4">
<ul class="nav nav-sidebar navbar-static-top navbar-fixed-top" style="width:200px;margin-top:50px;">
<li><router-link to="/vuexstore/comp1">组件1</router-link></li>
<li><router-link to="/vuexstore/comp2">组件2</router-link></li>
</ul>
</div>
<div class="col-md-10 col-sm-9 col-xs-8">
<div class="panel panel-success">
<div class="panel-body bg-success">
<h3>{ {$store.state.title} }</h3> //编写是请将大括号中间的空格去除，以下出现相同情况，处理方式一样，不在一一提醒
count is { {count} }
<router-view/>
<p style="color: red;padding-top:15px;">*运行后请选择侧面导航组件1、组件2查看变化</p>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
export default {
computed: mapGetters([
'count'
])
}
</script>
3.在component文件夹下，新建文件夹vuexstore。
在文件夹vuexstore下新建并编写comp1.vue和comp2.vue,这两个组件内容一样，(组件2中，请改为组件人count is，便于区分)
<template>
<div>
组件1 count is { {count} }
<br>
<button class="btn btn-warning" @click="increment">+5</button>
<button class="btn btn-success" @click="decrement">-3</button>
<button class="btn btn-danger" @click="multiply">x2</button>
<button class="btn btn-primary" @click="division">÷3</button>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default{
computed:mapGetters([
'count'
]),
methods:mapActions([
'increment',
'decrement',
'multiply',
'division'
])
}
</script>
4:router/index.js路由文件
import Vue from 'vue'
import Router from 'vue-router'
import Vuexstore from '@/components/vuexstore'
import Comp1 from '@/components/vuexstore/comp1'
import Comp2 from '@/components/vuexstore/comp2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/vuexstore',
name: 'Vuexstore',
component: Vuexstore,
children:[ //添加子路由
{
path: '/vuexstore/comp1',
name: 'Comp1',
component: Comp1,
},
{
path: '/vuexstore/comp2',
name: 'Comp2',
component: Comp2,
}
]
}
]
})
5.编写vuex/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
count:0,
title:'Vuex简单加减乘除运算实例'
}
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
export default store
6.编写vuex/actions.js
const actions = {
increment : ({commit})=>commit('increment'),
decrement : ({commit})=>commit('decrement'),
multiply : ({commit})=>commit('multiply') ,
division : ({commit})=>commit('division')
}
export default actions
7.编写vuex/mutaions.js
const mutations={
increment : state =>{
state.count=state.count+5,
state.title='进行了加法运算'
},
decrement : state =>{
state.count=state.count-3,
state.title='进行了减法运算'
},
multiply : state => {
state.count=state.count*2,
state.title='进行了乘法运算'
},
division : state => {
state.count=state.count/3,
state.title='进行了除法运算'
}
}
export default mutations
8.编写vuex/getters.js
const getters = {
count : state => state.count,
title : state => state.title
}
export default getters
9.编写main.js
import Vue from 'vue'
import App from './App'
import router from './router'
//引入jquery
import $ from 'jquery'
//引入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
//引入vuex状态管理模式
import store from './vuex/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
npm run dev后，启动项目。查看vuex示例</pre>
网友评论