zoukankan      html  css  js  c++  java
  • 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 仓库中的数据不一样,但别的东西都一样

     
  • 相关阅读:
    如何:为 Silverlight 客户端生成双工服务
    Microsoft Sync Framework 2.1 软件开发包 (SDK)
    Windows 下的安装phpMoAdmin
    asp.net安全检测工具 Padding Oracle 检测
    HTTP Basic Authentication for RESTFul Service
    Windows系统性能分析
    Windows Server AppFabric Management Pack for Operations Manager 2007
    Mongo Database 性能优化
    服务器未能识别 HTTP 标头 SOAPAction 的值
    TCP WAIT状态及其对繁忙的服务器的影响
  • 原文地址:https://www.cnblogs.com/yangzhiqiang/p/11385294.html
Copyright © 2011-2022 走看看