标签分类 技术文章:
当前位置:首页 > vue.js技术文章 > vue的状态管理模式vuex

vue状态管理模式vuex知识点总结

  • 发布时间:
  • 作者:码农之家原创
  • 点击:165

这篇文章主要知识点是关于vue、状态管理模式、vuex状态管理、vuex、状态、vuex 使用文档小结篇 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js实战
Vue.js实战高质量扫描版
  • 类型:Vue大小:196.7 MB格式:PDF出版:清华大学出版社作者:梁灏
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

vue的状态管理模式vuex

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。

备注:本文的示例等代码将会采用es6的语法。

链接

  1. vuex官方中文网站
  2. 使用vue和vuex实现的简易商城,仅供参考

vuex是什么?

先引用vuex官网的话:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理模式、集中式存储管理 一听就很高大上,蛮吓人的。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用。这么说吧,将vue想作是一个js文件、组件是函数,那么vuex就是一个全局变量,只是这个“全局变量”包含了一些特定的规则而已。

在vue的组件化开发中,经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时,我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系,或者一个状态需要共享给多个组件时,就会非常麻烦,数据也会相当难维护,这对我们开发来讲就很不友好。vuex 这个时候就很实用,不过在使用vuex之后也带来了更多的概念和框架,需慎重!

vuex里面都有些什么内容?

Talk is cheap,Show me the code. 先来一段代码间隔下这么多的文字:

const store = new Vuex.Store({
  state: {
    name: 'weish',
    age: 22
  },
  getters: {
    personInfo(state) {
      return `My name is ${state.name}, I am ${state.age}`;
    }
  }
  mutations: {
    SET_AGE(state, age) {
      commit(age, age);
    }
  },
  actions: {
    nameAsyn({commit}) {
      setTimeout(() => {
        commit('SET_AGE', 18);
      }, 1000);
    }
  },
  modules: {
    a: modulesA
  }
}

这个就是最基本也是完整的vuex代码;vuex 包含有五个基本的对象:

  1. state:存储状态。也就是变量;
  2. getters:派生状态。也就是set、get中的get,有两个可选参数:state、getters分别可以获取state中的变量和其他的getters。外部调用方式:store.getters.personInfo()。就和vue的computed差不多;
  3. mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.commit('SET_AGE', 18)。和vue中的methods类似。
  4. actions:和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch('nameAsyn')。
  5. modules:store的子模块,内容就相当于是store的一个实例。调用方式和前面介绍的相似,只是要加上当前子模块名,如:store.a.getters.xxx()。

vue-cli中使用vuex的方式

一般来讲,我们都会采用vue-cli来进行实际的开发,在vue-cli中,开发和调用方式稍微不同。

├── index.html
├── main.js
├── components
└── store
  ├── index.js     # 我们组装模块并导出 store 的地方
  ├── state.js     # 跟级别的 state
  ├── getters.js    # 跟级别的 getter
  ├── mutation-types.js # 根级别的mutations名称(官方推荐mutions方法名使用大写)
  ├── mutations.js   # 根级别的 mutation
  ├── actions.js    # 根级别的 action
  └── modules
    ├── m1.js     # 模块1
    └── m2.js     # 模块2

state.js示例:

const state = {
  name: 'weish',
  age: 22
};

export default state;

getters.js示例(我们一般使用getters来获取state的状态,而不是直接使用state):

export const name = (state) => {
  return state.name;
}

export const age = (state) => {
  return state.age
}

export const other = (state) => {
  return `My name is ${state.name}, I am ${state.age}.`;
}

mutation-type.js示例(我们会将所有mutations的函数名放在这个文件里):

export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';

mutations.js示例:

import * as types from './mutation-type.js';

export default {
  [types.SET_NAME](state, name) {
    state.name = name;
  },
  [types.SET_AGE](state, age) {
    state.age = age;
  }
};

actions.js示例(异步操作、多个commit时):

import * as types from './mutation-type.js';

export default {
  nameAsyn({commit}, {age, name}) {
    commit(types.SET_NAME, name);
    commit(types.SET_AGE, age);
  }
};

modules--m1.js示例(如果不是很复杂的应用,一般来讲是不会分模块的):

export default {
  state: {},
  getters: {},
  mutations: {},
  actions: {}
};

index.js示例(组装vuex):

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import m1 from './modules/m1.js';
import m2 from './modules/m2.js';
import createLogger from 'vuex/dist/logger'; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== 'production'; // 开发环境中为true,否则为false

export default new vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    m1,
    m2
  },
  plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

最后将store实例挂载到main.js里面的vue上去就行了

import store from './store/index.js';

new Vue({
 el: '#app',
 store,
 render: h => h(App)
});

在vue组件中使用时,我们通常会使用mapGetters、mapActions、mapMutations,然后就可以按照vue调用methods和computed的方式去调用这些变量或函数,示例如下:

import {mapGetters, mapMutations, mapActions} from 'vuex';

/* 只写组件中的script部分 */
export default {
  computed: {
    ...mapGetters([
      name,
      age
    ])
  },
  methods: {
    ...mapMutations({
      setName: 'SET_NAME',
      setAge: 'SET_AGE'
    }),
    ...mapActions([
      nameAsyn
    ])
  }
};

总结

以上就是vuex 的相关知识,其实vuex很简单,多用几次就会熟悉了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

vuex 使用文档小结篇

Vuex是什么?

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel调试、状态快照导入导出等高级调试功能。

安装

直接下载CDN 引用

  <script src="/path/to/vue.js"></script>
  <script src="/path/to/vuex.js"></script>

npm 

npm install vuex --save

在一个模块化的打包系统中,您必须显式地通过Vue.use() 来安装Vuex。  

import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex) 

  Vuex 是一个专为Vue.js 应用程序开发 的状态管理模式,集中式存储管理应用的所有组件状态。

  状态管理包含以下几个部分状态:

     state 驱动应用的数据源;

      view 以生命方式将 state 映射到视图。

       actions  响应在view 上的用户书输入导致的状态变化。

 帮助我们管理共享状态,中大型单页面应用。

   state

    单一状态树 ,Vuex使用单一状态树用一个对象就包含了全部的应用层级状态。

    在Vue 组件中获得Vuex 状态。

    由于Vuex的状态存储是响应式的,从store 实例中读取状态最简单的方法

    就是在计算属性中返回某个状态。

    创建一个Counter 组件   

 const Counter = {
        template: '<div>{{ count }}</div>'
        computed: {
          count (){
            return store.state.count
          }
        }
      }

  每次 store.state.count 变化的时候,都会重新求取计算属性,并且触发更新相关的DOM

    Vuex 通过 store 选项,提供了一种机制将状态从根组件『注入』到每一个子组件中(需调用 Vue.use(Vuex)):     

 const app = new Vue({
        el:'#app',
        // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所 有的子组件
        store,
        components: {Counter},
      template: '
        <div class="app">
          <counter></counter>
        </div>
        '
      })

   通过在根实例中注册 store 选项,该store 实例会注册入到跟组件下的所有子组件,且子组件能通过 this.$store 访问到。更新 counter 的实现:     

 const Counter = {
        template : '<div>{{ count }}</div>',
        computed: {
          count this.$store.state.count
          }
      }

    mapState 辅助函数

      当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些冗余。

      为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。      

// 在单独构建的版本中辅助函数为 Vuex.mapState
      import { mapState } from 'vuex'
        export default {
          computed: mapState({
            // 箭头函数可以使代码更简洁
              count: state => state.count,
            // 传字符串参数 ‘count' 等同于 ‘state => state.count'
              countAlias: 'count',
            // 为了能够使用 ‘this' 获取局部状态,必须使用常规函数
              countPlusLocalState(state) {
                  return state.count + this.localCount
                }
            })
         }

    当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。          

computed: mapState([
            // 映射 this.count 为 store.state.count
            'count'
          ])

    组件仍然保有局部状态。

    Getters

      有时候我们需要从store 中的state 中 的state 中派生一些状态,列如对列表进行过滤并计算。 

    computed: {
        doneTodosCount() {
            return this.$store.state.todos.filter(todo => todo.done).length
        }
      }

    Vuex 允许我们再store 中定义getters (可以认为是stroe 的计算属性)

      Getters 接受state 作为其第一个参数。        

const store = new Vuex.Store({
            state: {
              todos:[
                {id:1, text: '...' ,done: true},
                {id:2,text:'...',done: false}
              ]
            },
          getters: {
            doneTodos: state => {
                return state.todos.filter(todo=> todo.done)
              }
            }
          })

    Getters 会暴露为store.getters 对象:   

 store.getters.doneTodos // [{id:1,text: '...',done:true}]

    Getter 也可以接受其他getters 作为第二个参数:     

getters: {
          doneTodosCount: (state,getters) => {
            return getters.doneTodos.length
          }
      }
    store.getters.doneTodosCount // -> 1

      我们可很容易的在任何组件中使用       

 computed: {
          doneTodosCount() {
            return this.$store.getters.doneTodosCount
        }
      }

    mapGetters 辅助函数

    mapGetters 辅助函数仅仅是 store 中的getters 映射到局部计算属性。      

import {mapGetter} form 'vuex'
      export default {
        computed: {
          // 使用对象展开运算符将 getters 混入
          ...mapGetters([
              ‘doneTodosCount',
              'anotherGetter'
            ])
          }
        }

   如果你想讲一个getter 属性另取名字,使用对象性时

mapGetters({
         // 映射 this.doneCount 为 store.getters.doneTodosCount
          doneCount: 'doneTodosCount'
      })

          Mutations

        更改Vuex 的store 中的状态的唯一方式就是提交 mutation Vuex 中的mutation

        非常类似于事件,每个 mutation 都有一个字符串的 事件类型 和回调函数。这个回调函数就是我们实际进行状态更改的地方。并且他会接受 state 作为第一个参数。    

const store = new Vue.Store({
        state: {
            count: 1
        },
      mutations: {
          inctement (state) {
          state.count++
        }
      }
    })

   当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个

     mutation handler,你需要以相应的 type 调用 store.commit 方法      

store.commit('increment')

      提交载荷(Payload)

      你可以向store.commit 传入额外的参数,即mutation 的载荷:            

mutations: {
          increment (state, n) {
          state.count += n
        }
      }
      store.commit('increment', 10)

   在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录 mutation会更易读。     

mutations: {
      increment (state,payload) {
        state.count += payload.amount
        }
      }
      store.commit('increment', {
        amount:10
    })

  对象风格的提交方式

    提交mutation 的另一种方式直接使用包含 type 属性的对象:    

 store.commit({
        type: 'increment',
        amount:10
      })

  当使用对象风格的提交方式,整个对象作为载荷传给mutation 函数,因此handler保持不变:     

 mutations: {
        increment (state, payload) {
          state.count += payload.amount
        }
       }

  Mutations 需遵守vue 的响应规则

    既然Vuex的store 中的状态是响应式的,那么当我们变更状态时,监视状态的vue更新 ,这也意味值Vue 中的mutation 也需要与使用 Vue 一样遵守一些注意事项。

      1. 最好提前在你的store 中初始化好所有的所需要的属性。

      2.当需要在对象上提交新属性时,你应该使用        

Vue.set(obj, 'newProp', 123)

      使用新对象代替老对象  state.obj= {...state.obj ,newProp: 123}

      使用常量替代 Mutation 事件类型

      使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式     

export const SOME_MUTATION = 'SOME_MUTATION';
      import Vuex from 'vuex'
      import {SOME_MUTATION } from './mutation-types'
      const store = new Vuex.Store({
          state: {...}
          mutations: {
            // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
            [SOME_MUTATION] (state) {
            // mutate state
            }
          }
      })

mutation 必须是同步函数

    一条重要的原则是记住 mutation 必须是同步函数。       

 mutations: {
          someMutation (state) {
            api.callAsyncMethod(() => {
                state.count++
            })
          }
        }

 在组件中提交 Mutations

    你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使使用 mapMutations辅助函数将组建中的methods 映射为 store.commit 调用 (需要在根节点注入 store)    

import {mapMutations} from 'vuex'
      expor default {
        methods: {
          mapMutations([
              methods: {
                mapMutations([
                  'increment' // 映射 this.increment() 为 this.$store.commit('increment')
          ]),
        mapMutations({
              add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
          })
        }
      ])
      }
    }

Actions  

    在mutation 中混异步调用会导致你的程序很难调试。

Actions

    Action 类似于 mutation,不同在于。

    Action 提交的是 mutation ,而不是直接变更状态。

    Action 可以包含任意异步操作。

    注册一个简单的 action    

const store = new Vuex.Store({
      state: {
          count:0
      },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions: {
        increment (context){
          context.commit('increment')
          }
        }
    })

Action 函数接受一个与store 实例具有相同方法和属性的context 对象,因此你可以调用 context.commit 提交一个mutation,或者通过 context.state 和context.getters 来获取 state 和 getters 当我们在之后介绍到Modules时,你就知道 context 对象为什么不是store 实例本身了。   

actions: {
      increment({commit}){
        commit('increment')
      }
    }

分发 Action

    Action 通过 store.dispatch 方法触发:     

store.dispatch('increment')

    我们可以在 action 内部执行异步操作。   

 actions: {
      incrementAsync({commit}){
        setTimeout(() => {
          commit('increment')
        },1000)
        }
      }

  Actions 支持同样的载荷方式和对象方式进行分发    

 // 以载荷形式分发
    store.dispatch('incrementAsync',{
      amount:10
    })
    // 以对象形式分发
      store.dispatch({
        type: 'incrementAsync',
        amount:10
      })

 在组件中分发 Action

    你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用map Actions辅助函数将组件的methods 映射为store.dispatch 调用   

import {mapActions } from 'vuex'
      export default{
        methods:([
          'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
        ])
      mapActions({
          add: 'inctement' // 映射 this.add() 为 this.$store.dispatch('increment')
        })
      }

组合 Actions

    Action 通常是异步的,那么如何知道 action 什么时候结束。

    你需要明白 store.dispatch 可以处理被处触发的action 的回调函数返回的Promise并且 store.dispatch 仍旧返回Promise   

actions: {
        actionA({commit}){
        return new Promise((resolve)=>{
            setTimeout (() => {
              commit('someMutation')
              resolve()
            },1000)
          })
        }
      }

  现在你可以     

store.dispatch('actionA').then(()=>{
        //...
      })

  在另一个 action 中也可以  

actions: {
      actionB({dispath,commit}){
        return dispatch('actionA').then(() => { 
        commit('someOtherMutation')
      })
    }
    }

  我们利用async/ await   

// 假设 getData() 和 getOther() 返回的是一个 Promis
    actions:{
        async actionA ({commit}){
          commit('gotData',await getData())
        },
        async actionB({dispatch,commit}){
          await dispatch('actionA') // 等待 actionA 完成
          commit('goOtherData', await getOtherData())
        }
      }

    Modules

      使用单一状态树,当应用变的很大的时候,store 对象会变的臃肿不堪。

      Vuex 允许我们将store 分割到模块。每一个模块都有自己的state, mutation,action, getters, 甚至是嵌套子模块从上到下进行类似的分割。     

const moduleA = {
          state: {...},
        mutations: {...}
        actions: {...}
        getters:{...}
        }
    const moduleA = {
        state: {...},
        mutations: {...}
        actions: {...}
      }
    const store = new Vuex.Store({
      modules: {
          a:moduleA,
          b:moduleB
        }
      })
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态

模块的局部状态

    对于模块内部的 mutation 和 getter, 接收的第一个参数是模块的局部状态。  

 const moduleA = {
          state: {count:0},
          mutations: {
            increment (state) {
                // state 模块的局部状态
                state.count++
            }
          },
      getters: {
        doubleCount (state) {
        return state.count * 2
        }
      }
    }

   同样对于模块内部的action, context.state 是局部状态,根节点的窗台石context.rootState:    

const moduleA = {
          actions: {
          incrementIfOddOnRootSum ({state, commit ,rootState}) {
            if((state.count + rootState.count) %2 ===1){
                commit('increment')
          }
         }
        }
      }

 对于模块内部的getter,跟节点状态会作为第三个参数:     

const moduleA = {
          getters: {
            getters: {
              sumWithRootCount (state,getters,rootState) {
                      return state.count + rootState.count
                }
              }
          }
        }

命名空间

    模块内部的action, mutation , 和 getter 现在仍然注册在全局命名空间    这样保证了多个模块能够响应同一 mutation 或 action. 也可以通过添加前缀 或者 后缀的

      方式隔离各个模块,以免冲突。     

// 定义 getter, action , 和 mutation 的名称为常量,以模块名 ‘todo' 为前缀。
        export const DONE_COUNT = 'todos/DONE_COUNT'
        export const FETCH_ALL = 'todos/FETCH_ALL'
        export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
          import * as types form '../types'
    // 使用添加了解前缀的名称定义, getter, action 和 mutation
     const todosModule = {
        state : {todo: []},
        getters: {
          [type.DONE_COUNT] (state) {
          }
      }
    actions: {
        [types.FETCH_ALL] (context,payload) {
       }
      },
    mutations: {
        [type.TOGGLE_DONE] (state, payload)
      }
    }

模块动态注册

    在store 创建之后,你可以使用 store.registerModule 方法注册模块。     

store.registerModule('myModule',{})

      模块的状态将是 store.state.myModule.

      模块动态注册功能可以使让其他Vue 插件为了应用的store 附加新模块

      以此来分割Vuex 的状态管理。

    项目结构

      Vuex 并不限制你的代码结构。但是它规定了一些需要遵守的规则:

        1.应用层级的状态应该集中到单个store 对象中。

        2.提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

        3.异步逻辑应该封装到action 里面。

          只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation、和 getters 分割到单独的文件对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例

├── index.html
├── main.js
├── api │ 
  └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store 
  ├── index.js  # 我们组装模块并导出 store 的地方 
  ├── actions.js  # 根级别的 action 
  ├── mutations.js  # 根级别的 mutation 
  └── modules  
     ├── cart.js  # 购物车模块  
    └── products.js # 产品模块

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到Vue.js修饰符知识点详解、 vue:src文件路径错误问题及、 vue状态管理模式vuex知识点、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vuejs使用value in list循环遍历数组出现警告的解决方法

下一篇:vue实现登录后页面跳转到之前页面的实例代码

展开 +

收起 -

学习笔记
网友NO.339694

Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

准备 利用vue-cli脚手架创建项目 进入项目安装vuex、axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块( npm install axios )完成后,进行以下配置: main.js //引入axiosimport Axios from 'axios'//修改原型链,全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求Vue.prototype.$axios=Axios loading组件 我这里就选择使用iview提供的loading组件, npm install iview main.jsimport iView from 'iview';import 'iview/dist/styles/iview.css';Vue.use(iView); 安装引入后,将loading写成一个组件loading.vue Vuex state状态设置控制loading的显隐 store.js(Vuex) export const store = new Vuex.Store({ state:{ isShow:false }}) 在state中定义isShow属性,默认false隐藏 v-if="this.$store.state.isShow" 为loading组件添加v-if绑定state中的isShow 组件使用axios请求数据 button @click="getData"请求数据/buttonmethods:{ getData(){ this.$axios.get('https://www.apiopen.top/journalismApi') .then(res={ console.log(res)//返回请求的结果 }) .catch(err={ console.log(err) }) } } 我这里使用一个按钮进行触发事件,利用get请求网上随便找的一个api接口,.then中返回请求的整个结果(不仅仅包括数据) Axios拦截器配置 main.js //定义一个请求拦截器Axios.interceptors.request.use(function(config){ store.state.isShow=true; //在请求发出之前进行一些操作 return config})//定义一个响应拦截……

网友NO.884149

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

效果图如下所示: 在线地址: github.czero.cn/fancy 点击下载安卓apk安装包 源码地址: github.com/czero1995/f… 项目主架构 使用的库 vue-cli (vue+webpack脚手架) vue-router(路由跳转) vuex(状态管理) axios(数据请求) mock.js(模拟后台数据) vue-touch(手势判断) fastclick(解决移动端浏览器 300 毫秒点击延迟问题) vue-lazyload(图片懒加载) swiper(轮播) 设计布局: 将页面的固定布局 position:fixed (比如Header,Footer)全部改为绝对布 局position:absolute ; 因为fixed会出现莫名其妙的兼容性问题,比如在ios11或ios8下会失效,输入框软键盘激活之后会把底部的固定定位弹出去,导致布局错乱。 用absolute实现fixed细节可以参考这篇 HTML5 CSS3 Less rem(阿里用的那套rem算法) Flex(弹性布局) vue-touch(用于实现购物车左滑删除功能) *动画(vue原生transition实现原生app的效果) 数据请求: Mock(模拟后台数据) Axios(请求数据) 逻辑交互: vue(数据渲染,各个组件间的数值传递) vue-router(组件间的路由跳转) vuex(全局状态的管理) 优化方案: 腾讯智图(压缩图片,减少图片的体积) vue-lazyload(图片懒加载,缓解加载数据,提高网页性能) fastclick(解决移动端300ms延迟,提高页面交互流畅度) vue-rouer(路由懒加载,分离app的js为多个js文件,到对应的页面再执行对应的js) webpack(config/index.js文件内的productionSourceMap改为false……

网友NO.501742

vue2.0学习之axios的封装与vuex介绍

一、前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助。这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋。如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, 不过我还是建议看文档比较好。os: Vue文档是非常详细的 二、准备 做vue单页应用都需要会什么? 1. vue的脚手架,直接帮你建好项目。再看看自己想要啥,补充啥! os: Git 上有很多成品项目,可以找一个好点的拉下来 注: 路由按需加载、热加载 等这些都是基础功能,在这不多说。os: 慕课网有Vue的课程,网上有资源,挺不错的 2. 引入并会使用 vuex。对共享变量进行统一管理,解决多层组件传数据的问题。这个咱后面详说。 3. 封装 axios,对请求进行统一的管理,并减少代码量。 三、关于vuex 出现背景: 了解过vue1.0的人应该都知道,vue的父子组件通信是很烦的,一层还好。如果有个3、4层,那父子组件通信,就头疼了。以前,这是需要开发者捋清逻辑,在合适的地方修改并传递的。但是vue2.0为了解决这个问题,提出了vuex,状态统一管理。 作用:vuex 将所有需要共享的变量放在一起,像一个仓库一般,你想对仓库中的变量 读取、修改 ,直接调 指定方法就可以,超级方便。 结构:vuex的结构大致为: state: 存放所有变量 mu……

网友NO.723556

Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)

在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大。对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的用法,你应该要掌握组件之间的通信,如果不了解,请参考以下这两篇文章: Vue2.0基于vue-cli+webpack父子组件通信教程(实例讲解) Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐) 搭建环境开始: 在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli 安装vue命令行工具 2,vue init webpack vue-demo 使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目 然后删除默认的Hello.vue组件,把App.vue整理成以下样子 template div id="app" 这是一个空的app /div/templatescript export default { name : 'app' }/script 把router下面index.js文件修……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明