doina

一个小菜鸟运维工程师.

VueX学习

[toc]

VueX学习

  • 把需要多个组件共享的变量全部存储在一个对象里面。
  • 集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
  • 响应式
  • npm install vuex –save

单界面的状态管理

  • State:就是我们的状态。(可以当做就是data中的属性)

  • View:视图层,可以针对State的变化,显示不同的信息。

  • Actions:这里的Actions主要是用户的各种操作:点击、输入等等,会导致状态的改变。

    《VueX学习》

多界面状态管理

  • 多个试图都依赖同一个状态(一个状态改了,多个界面需要进行更新)

  • 不同界面的Actions都想修改同一个状态(Home.vue需要修改,Profile.vue也需要修改这个状态)

    《VueX学习》

VueX的五个核心概念

  • State: 单一状态树

  • const state = {
    counter: 1000,
    students: [
      {id: 110, name: 'why', age: 18},
      {id: 111, name: 'kobe', age: 24},
      {id: 112, name: 'james', age: 30},
      {id: 113, name: 'curry', age: 10}
    ],
    info: {
      name: 'kobe',
      age: 40,
      height: 1.98
    }
    }
    
  • Getters: 类似于组件中的计算属性, 作为参数和传递参数,可以传入两个参数

    • state: 传入的是state中的数据. 通过state. 获取
    • getters: : 传入的是getters中的数据, 通过 getters. 获取
    • 如果需要传递参数, 需要return一个函数

    • export default  {
      powerCounter(state) {
      return state.counter * state.counter
      },
      more20stu(state) {
      return state.students.filter(s => s.age > 20)
      },
      more20stuLength(state, getters) {
      return getters.more20stu.length
      },
      moreAgeStu(state) {
      return age => {
        return state.students.filter(s => s.age > age)
      }
      }
      }
      
  • Mutations: 状态更新

    • commit提交风格

    • 字符串的事件类型(type)

    • 一个回调函数(handler),该回调函数的第一个参数就是state。

    • 包含type属性的对象:

    • Mutation中的处理方式是将整个commit的对象作为payload使用

    • 参数被称为是mutation的载荷(Payload)

    • 响应式规则

    • 如果直接操作对象或者数组,添加或者删除对象, 页面是不会做到响应式的,

    • Vue.set(state.info, ‘address’, ‘河北’): 可以做到响应式的添加
    • Vue.delelte(state.info, ‘age’): 可以做到响应式的删除

    • 类型常量

    • 使用常量替代Mutation事件的类型.

    • 可以将这些常量放在一个单独的文件中
    • 可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量

    • “`js
      import {INCREMENT} from “./mutations-types”;

    export default {
    // 方法
    INCREMENT {
    state.counter++
    },
    }
    “`

  • <li><p>Actions: 类似于Mutation, 但是是用来代替Mutation进行异步操作的.

    <ul>
    <li>所有异步操作要放到action中</p></li>
    <li><p>可以使用Promise</p></li>
    <li><p>“`js
    export default {
    // context: 上下文
    aUpdateInfo(context, payload) {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    context.commit(‘updateInfo’);
    console.log(payload);

    resolve('1111111')
    

    }, 1000)
    })
    }
    }

“`

  • Module: 局部状态
    • 当state过多的时候,可以使用module来分离, 在中定义模块,每个模块可以定义上面的所有属性
    • 《VueX学习》
  • Vuex的使用

    • 创建一个文件夹store,并且在其中创建一个index.js文件, 存放Vuex代码
    • 在store文件夹中创建actions.js: 被分离出来的 用于异步处理的js文件
    • 在store文件夹中创建getters.js: 被分离出来的 用于计算属性的js文件
    • 在store文件夹中创建mutations.js:被分离出来的 用于接收提交过来的状态, 并进行更新
    • 在store文件夹中创建mutation-types.js: 用于存放常量
    • 在store文件夹中创建modules文件夹,用来存放不同的模块
    • 挂载到Vue实例中

    Vuex的基本使用

    gitee中的存放的代码

    src/store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import mutations from './mutations'
    import actions from './actions'
    import getters from './getters'
    import moduleA from './modules/moduleA'
    
    // 1.安装插件
    Vue.use(Vuex)
    
    // 2.创建对象
    const state = {
      counter: 1000,
      students: [
        {id: 110, name: 'why', age: 18},
        {id: 111, name: 'kobe', age: 24},
        {id: 112, name: 'james', age: 30},
        {id: 113, name: 'curry', age: 10}
      ],
    }
    const store = new Vuex.Store({
      state,
      mutations,
      actions,
      getters,
    
      modules: {
        a: moduleA
      }
    })
    
    // 3.导出store独享
    export default store
    

    src/main.js

    import Vue from 'vue'
    import App from './App'
    import store from './store'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,    // 导入store
      router,
      render: h => h(App)
    })
    
    

    推荐的目录结构

    《VueX学习》

    点赞

    发表评论

    电子邮件地址不会被公开。

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据