vuex实现加减乘除实例

效果图

vuex实例效果图.png

vuex是专门为vue.js应用开发的状态管理模式。详细学习可查看 vuex官网,安装vuex命令：npm install vuex --save
在此是运用vue+vuex+vue-router写了一个简单的加减乘除实例。具体详解如下：

1:编写app.vue,添加导航：

        ```
                
Vuex示例
      ```

2:编写vuexstroe.vue

3.在component文件夹下，新建文件夹vuexstore。

                在文件夹vuexstore下新建并编写comp1.vue和comp2.vue,这两个组件内容一样，(组件2中，请改为组件人count is，便于区分)
                     
                        

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: '',
                           components: { App }
                           })     

                    npm run dev后，启动项目。查看vuex示例