chaihongjun.me

[Vuex]入门学习之一Vuex初识

Vuex是Vue的官方状态管理插件,适用场景是在中大型单页应用中,比如用户的登陆信息数据会在会员所有页面可用,实际可以理解为多组件共享数据维护。按照官方给的示例通过vuecli3.0脚手架做了一个Demo,项目结构如图:
[Vuex]入门学习之一Vuex初识
store.js是通过脚手架搭建项目基础配置生成的,它作为Vuex的核心保存了大部分的状态(组件件共享的数据)。store里面的数据改变了之后,组件也会相应的变化。
store里面数据的变化规则是必须显示的commit。
分析一个各个组件和模块的内容及其之间的关系:

main.js 入口文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

引入了vuex的核心store,并注入到Vue实例中。


router.js 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

home和about两个组件页面,demo中的这两个页面分别操作减法和加法。Home组件是默认的首页。


store.js Vuex核心配置文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
            console.log("increment:" + this.state.count)
        },
        decrement(state) {
            state.count--
            console.log("decrement:" + this.state.count)
        }
    },
    actions: {}
})

引入Vuex并使用Vuex,然后是实例化store(仓库)对象,这个仓库将保管状态(共享的数据)。state选项里面是状态的初始状态。状态的变化则放到mutations里面。


Home.vue 主页组件(主组件)

<template>
    <div class="home">
        <p>这是主页</p>
        <HelloWorld msg="请打开浏览器控制台" />
        <button @click="decrement">-1</button>
    </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import store from '@/store'
export default {
    name: 'home',
    components: {
        HelloWorld
    },
    methods: {
        decrement() {
           //commit提交的方法decrement
           // 是store实例里 mutations选项的 decrement
           // 即告诉 store仓库去执行它在mutations里的decrement方法
            store.commit('decrement')
        }
    }
}
</script>

因为涉及到home组件维护store里面的状体,因此需要import  store实例,Home组件通过一个方法改变状态,则在这个方法里需要store显示的commit。另外,Home组件向子组件HelloWorld传递了一个字符串数据"请打开浏览器控制台"


HelloWorld.vue (Home 组件的子组件)

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>
<script>
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

接收来自父组件Home的数据,并显示出来.



About.vue 关于组件

<template>
    <div class="about">
        <h1>这个是关于页面</h1>
        <button @click="increment">+1</button>
    </div>
</template>
<script>
import store from '@/store'
export default {
    name: 'about',
    methods: {
        increment() {
            store.commit('increment')
        }
    }
}
</script>

这个路由映射的另外一个组件。同样也是引入store模块,绑定了一个方法increment,这个方法内也是让store显示的提交共享数据变化,用的是store里面的increment方法。


打开控制台之后,在两个页面直接切换并点击对应的按钮,会发现数据会依照我们设想的那样去变化。

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»