zoukankan      html  css  js  c++  java
  • <十>vuex 状态管理

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

    简单的说就是多个组件之间共享的数据的存储的地方。

    Vuex由三部分组成。

    • Actions负责数据的处理,
    • Mutations负责数据修改,
    • State负责数据存储。

    1、安装vuex,安装完成查看node_Modules有没有vuex文件

    npm install vuex --save

    2、在src中创建一个store的文件夹用来存放vuex的文件,在创建一个index.js作为vuex的配置文件,内容如下:

    import Vue from 'vue'
    import Vuex from 'vuex'
    //声明使用vuex
    Vue.use(Vuex)
    // 新建一个store
    export default new Vuex.Store({
      state: { // state用来存储数据,
        testInfo: 'hello'   //数据以键值对形式存储  
      }
    })

    3、main.js引入vuex.

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

    4、上面state存储了一个数据进去,使用this.$store.state.数据名,来获取数据。

    换掉默认路由的组件为12345.vue

     {
          path: '/',
          name: '12345',
          component: a12345
        },

    根组件内容恢复成初始

    <template>
      <div id="app">
        <img src="./assets/logo.png">
         <router-view/>
      </div>
    </template>

    这样就去除了路由相关代码的影响。修改12345组件的内容,

    <template>
      <div class='hello'>{{this.$store.state.testInfo}}</div>
    </template>
    
    <script>
    export default {
      name: '12345',
      data () {
      }
    }

    运行看,hello就是我们定义的testInfo的值。

     5、修改vuex参数有两种方式,一种是actions->mutations->state;一种是mutations->state。

    action和mutations的区别:

    二者扮演角色的不同:Mutation:专注于修改State,理论上是修改State的唯一途径。Action:业务代码、异步请求。

    二者有不同的限制:Mutation:必须同步执行。Action:可以异步,但不能直接操作State。

    从上面二者的区别也可以看出来了state,Mutation,Action实际上有不同的分工,那么为了便于管理,可以在文件上给与解耦。

    那么就可以这么分层了:index.js只作vuex的创建和state的声明,新建一个mutation.js和action.js分别存放他们相应的代码。

     给mutatioin.js添加更改testInfo.的代码

    export default {
      changeinfo (state, arg) {
        state.testInfo = arg
      }
    }

    给action.js添加更改testInfo.的代码

    export default {
      changeinfo (context, arg) {
        context.commit('changeinfo', arg)
      }
    }

    在store/index.js种给vuex配置mutatioin和action

    import Vue from 'vue'
    import Vuex from 'vuex'
    import mutations from './mutation'
    import actions from './action'
    Vue.use(Vuex)
    export default new Vuex.Store({
      state: {
        testInfo: 'hello'
      },
      actions: actions,
      mutations: mutations
    })

    修改12345.vue,添加一个button点击改变文字

    <template>
    <div>
     <button @click="changeInfo">点击</button>
      <div class='hello'>{{this.$store.state.testInfo}}</div>
    </div>
    </template>
    
    <script>
    export default {
      name: '12345',
      methods: {
        changeInfo () {
          this.$store.dispatch('changeinfo', 'hello change')
        }
      }
    }
    </script>

    最后运行:

  • 相关阅读:
    golang 数据结构 优先队列(堆)
    leetcode刷题笔记5210题 球会落何处
    leetcode刷题笔记5638题 吃苹果的最大数目
    leetcode刷题笔记5637题 判断字符串的两半是否相似
    剑指 Offer 28. 对称的二叉树
    剑指 Offer 27. 二叉树的镜像
    剑指 Offer 26. 树的子结构
    剑指 Offer 25. 合并两个排序的链表
    剑指 Offer 24. 反转链表
    剑指 Offer 22. 链表中倒数第k个节点
  • 原文地址:https://www.cnblogs.com/choii/p/15672911.html
Copyright © 2011-2022 走看看