• vuex


    每一个vuex应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

    1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

    安装

    1 在vue之后引入vuex

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

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

    2.npm

      npm install vuex -S

      在vue-cli中,写入以下

      import Vue from 'vue'

      import Vuex from 'vuex'

      Vue.use(Vuex)

      通过new Vuex.store 来创建一个store

      const store = new Vuex.Store({
      
      })

      store里面有5个对象

      一、state :就是数据仓库;也是我们仓库存放数据的地方

      二、mutations:修改仓库的数据,只能通过 commit 来向上传递

      我们组件如果想修改数据,正确的操作流程

      1. 查看是同步还是异步,是同步则,跳过 actions,直接从 mutations 中修改 state 的数据,这样 state 仓库的数据修改了之后,我们才能正确的响应到组件上

      所以,组件仅仅把事件提交给 mutations 就好了, 让 vuex 的 mutations 的方法执行,

      使用的方法,配合使用

        组件vue 中想修改 vuex 中 state (仓库)中的数据

        this.$store.commit("jia",5)

        vuex 中实例对象中 将 jia 方法的处理

        mutations:{

          jia(state,n){  // state 就是仓库,也是我们修改数据的东西, n 就是第二个参数,代表5

            console.log(state);

            console.log(n);

          }

        }

      第二种写法:

        this.$store.commit({

          type:"jia",    // type 决定了提交的事件名

          cont:n     // 这个就是我们组件向 vuex 中提交的数据 

        })

      mutations:{

        jia(state,n){

          console.log(state);  // 就是我们的 vuex 的仓库

          console.log(n);   //  n 就是提交的对象 

        }

      }

      三、actions:如果我们涉及到异步的提交数据,那就只能从 actions 开始,到 mutations 然后才能修改 state 中的数据,最后渲染到 vue 的组件上

      如果我们不这样操作,虽然我们的数据因响应式的也可以正常的渲染页面,但是我们的 vuex 的仓库 state ,却不能正常的显示

      操作步骤:

      vue 的组件上,我们的提交方式

      this.$store.dispatch('jia',5);

      // 对我们 vuex 的实例上的建立一个仓库,放一个数据

      state:{

        cont:0

      }

      然后我们可以在 vuex 的实例上对异步的处理,在 actions 上

      actions:{

        jia(store,n){

          console.log(store)  // 就是,vuex 的实例

          console.log(n)  // 就是我们传输的数据

          // 在这里我们进行异步处理

          setTimeout(()=>{

            store.commit('jia',n)  // 我们异步处理完了,然后我们提交到 mutations 上来对 仓库上的 state 来进行修改

          },2000)

        }

      }

      mutations:{

        jia(state,n){

          state.cont++

        }

      }

      我们还有对象的第二种写法,与 mutations 提交的对象写法一致

      四、getters:{

        doublecount(){

          return conts+10;

        }  // 返回值就是 doublecount 的 return 值

      }

      五、moudel 模块,

      思想:就是将我们写在一起的东西,分开,比如 state 仓库的数据,我们可以使用 es6 的模块化开发,来引入别的模块的数据,先达到文件分离的目的

      我们还可以使用 module 对象,来使我们的仓库分离,只是 state 仓库中的数据不一样,但别的东西都一样

     
  • 相关阅读:
    TMD 这个写笔记的号,盗了有意思吗
    类成员的指针必须NULL化,否则是乱七八糟的东西
    超前引用不可使用类名来定义变量和函数的变量参数,只可用来定义引用或者指针。
    XP下,移动窗口产生重影的问题
    生成ico格式图标
    设置窗口的z-order总是在最底部
    关于windows的锁定状态
    使用Layered Window遇到的一些问题及解决方法
    转-使用wifi调试程序
    URL的格式
  • 原文地址:https://www.cnblogs.com/yangzhiqiang/p/11385294.html
Copyright © 2020-2023  润新知