一个简单的demo来理解vuex

相比接触vue的同学们已经看了官方文档了。这里我用一个简单的demo来阐述下vuex的知识点，虽然简单，但是容易理解。也加深自己的记忆。

用脚手架建立个项目vue init webpakc-simple ，安装下vuex，这里我新建2个组件productOne,productTwo.
好，如果想在2个组件中引用同一组数据，笨方法就是在每个组件的data里写上数据，聪明点可以在根组件中建立数据，通过props传给子组件。那么这里，我用vuex来储存数据。通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

新建个store文件夹，里面新建个store.js。这里就是vuex状态管理作用的地方。
store.js中

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
    }
})

main.js中，引入store模块并注册。

import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store.js'
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

state

官网上说，state是作为一个单一状态树，用一个对象来包含了全部的应用层级状态。至此它便作为一个唯一数据源的存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

由于vuex的状态存储是响应式的，那么在组件中，我们就可以用计算属性来获取state状态。每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        products:[
            {name:'apple', price: '2'},
            {name:'banana', price: '3'},
            {name:'pear', price: '4'},
            {name:'melon', price: '5'},
        ]
    }
})

两个组件中的结构大概如下：用计算属性用this.$state来返回这个状态。

<template>
    <div class="product-one">
        <h2>product-one</h2>
        <ul>
            <li v-for="item in product">
                <div class="name">{{item.name}}</div>
                <div class="price">{{item.price}}</div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        computed: {
            product() {
                return this.$store.state.products
            }
        }
    }
</script>

这样2个组件中的数据就可以统一在store.js中管理了。效果如下：


好，如果现在想改变下数据的一些内容，比如价格都涨2倍，那该怎么做呢，此时就用到getters

getter

官网上说，getters就相当于是store的计算属性，可以处理state的数据，它接受第一个参数就是state。那么接下来就简单了，把计算逻辑写在getters里，在组件中再获取getters就行了。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        products:[
            {name:'apple', price: '2'},
            {name:'banana', price: '3'},
            {name:'pear', price: '4'},
            {name:'melon', price: '5'},
        ]
    },

    getters: {
        changeProduct: (state) => {
            return state.products.map(val => {
                return {
                    name: '**' + val.name + '--',
                    price: val.price*2
                }
            })
            return state.products
        }
    }
})

在子组件中,用计算属性来获取getters,并在DOM中遍历这个计算属性。

    export default {
        computed: {
            product() {
                return this.$store.state.products
            },
            changeProduct(){
                return this.$store.getters.changeProduct
            }
        }
    }


<li v-for="item in changeProduct">
    <div class="name">{{item.name}}</div>
    <div class="price">{{item.price}}</div>
</li>

可以看到，2个组件的数据都改变了。


mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法。
简单来说，就是mutations就类似事件，子组件中用this.$store.commit('事件名')来获取。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        products:[
            {name:'apple', price: '2'},
            {name:'banana', price: '3'},
            {name:'pear', price: '4'},
            {name:'melon', price: '5'},
        ]
    },

    getters: {
        changeProduct(state){
            return state.products.map(val => {
                return {
                    name: '**' + val.name + '--',
                    price: val.price*2
                }
            })
            return state.products
        }
    },

    mutations: {
        decrePrice(state){
            state.products.forEach(val => {
                val.price -= 1
            })
        }
    }
})

子组件中

methods: {
            decrePrice(){
                return this.$store.commit('decrePrice')
            }
}

action

action和mutation类似，不同的是，Action 提交的是 mutation，而不是直接变更状态。而且Action支持异步。mutation必须同步执行。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    state: {
        products:[
            {name:'apple', price: '2'},
            {name:'banana', price: '3'},
            {name:'pear', price: '4'},
            {name:'melon', price: '5'},
        ]
    },

    getters: {
        changeProduct(state){
            return state.products.map(val => {
                return {
                    name: '**' + val.name + '--',
                    price: val.price*2
                }
            })
            return state.products
        }
    },

    mutations: {
        decrePrice(state){
            state.products.forEach(val => {
                val.price -= 1
            })
        }
    },

    actions: {
        decrePriceAction(context){
            setTimeout(()=>{
                context.commit('decrePrice')
            }, 2000)
        }
    }
})

子组件中,用this.$store.dispatch('action的名字')来获取。

        methods: {
            decrePrice(){
                // return this.$store.commit('decrePrice')
                return this.$store.dispatch('decrePriceAction')
            }
        }

好，一些基本的就这样，其它的可以去官网看哦~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • vuex 使用说明
    安装 npm npm install vuex --save 在一个模块化的打包系统中，您必须显式地通过Vue.u...
    萧玄辞阅读 2,963评论 0赞 7
  • Vuex 状态管理工具
    Vuex是什么？ Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,138评论 0赞 6
  • 11.vuex 探索之路
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应...
    白水螺丝阅读 4,683评论 7赞 61
  • Vuex一篇文章总结
    vuex 场景重现：一个用户在注册页面注册了手机号码，跳转到登录页面也想拿到这个手机号码，你可以通过vue的组件化...
    sunny519111阅读 8,035评论 4赞 111
  • vuex 要点 -- 原创
    vuex是一个状态管理模式，通过用户的actions触发事件，然后通过mutations去更改数据（你也可以说状态...
    Ming_Hu阅读 2,038评论 3赞 3