zoukankan      html  css  js  c++  java
  • vuex

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

    在src上新建一个store文件夹,在里面新建一个index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store({
      state: {
        count: 0,
        data: 5,
        todos: [
          {id: 1, text: 'hello', done: true},
          {id: 2, text: 'world', done: false},
          {id: 3, text: 'china', done: true},
          {id: 4, text: 'beijing', done: false}
        ]
      },
      getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      },
      mutations: {
        increment: state => state.count++,
        decrement: state => state.count--
      }
    })
    export default store

    然后在main.js

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    import store from './store' //引入这个文件夹
    Vue.use(ElementUI)
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

    在组件中使用

    <template lang="html">
      <div class="demo">
        <p>{{count}}</p>
        <el-button type="primary" @click="increment">+</el-button>
        <el-button @click="decrement">-</el-button>
        <p>{{$store.getters.doneTodos}}</p>
        <p>{{data}}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'demo',
      computed: {
        count () {
          return this.$store.state.count
        }
      }
      methods: {
        increment () {
          this.$store.commit('increment')
        },
        decrement () {
          this.$store.commit('decrement')
        }
      }
    }
    </script>
    
    <style lang="css">
    </style>

      通过count计算属性获取同名state.count属性,是不是显得太重复了,我们可以使用mapState函数简化这个过程。

    有两种方式:需要引入  import { mapState } from 'vuex'

    1.

      computed: mapState([
        'count',
        'data'
      ]),

    2.

      computed: mapState({
        data: state => state.data,
        countAlias: 'data'
      }),

    Getters

    如果我们需要对state对象进行做处理计算,

    组件中书写:

     <template>
      <p>
      {{doneTodos}}
      </p>
    </template>
    computed: { doneTodos () { return this.$store.state.todos.filter(todo => todo.done) } },

    store/index.js 在state中书写

        todos: [
          {id: 1, text: 'hello', done: true},
          {id: 2, text: 'world', done: false},
          {id: 3, text: 'china', done: true},
          {id: 4, text: 'beijing', done: false}
        ]

    最后效果只展示done为true的信息

      如果多个组件都要进行这样的处理,那么就要在多个组件中复制该函数。这样是很没有效率的事情,当这个处理过程更改了,还有在多个组件中进行同样的更改,这就更加不易于维护。

      Vuex中getters对象,可以方便我们在store中做集中的处理。

      在store/index.js  在state下面书写

      

    getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      },

    在组件的template中直接书写

    <p>{{$store.getters.doneTodos}}</p>

     或者使用MapGetters

    import { mapGetters } from 'vuex'
    computed: mapGetters([
        'doneTodos',
        'doneTodosCount'
      ]),

    Mutation

    import {  mapMutations } from 'vuex'
    methods: {
        ...mapMutations([
          'increment',
          'decrement'
        ])
      }

    不用MapMutations

    可以用

    methods: {
        increment () {
          this.$store.commit('increment')
        },
        decrement () {
          this.$store.commit('decrement')
        }
      }
  • 相关阅读:
    ASP.NET MVC 音乐商店 1 创建项目
    ASP.NET MVC 音乐商店 2.控制器
    TCP/IP体系结构
    C#线程系列
    多条件分页查询细节
    持续集成引擎 Hudson 和IOC 引擎StructureMap
    GoF著作中未提到的设计模式
    Thoughtworks
    Thoughtworks2
    监控 SQL Server 的运行
  • 原文地址:https://www.cnblogs.com/SunShineM/p/6703193.html
Copyright © 2011-2022 走看看