Vue系列教程（四）—— 与 Vuex 的第一次接触

在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 https://blog.csdn.net/preferG/article/details/82767020

但是如果是大型项目，很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。

 

一、安装并引入 Vuex

项目结构：主要用到框红的部分

 

首先使用 npm 安装 Vuex

npm install vuex -g

 

然后在 main.js 中引入

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

import Vuex from 'vuex'

// 引入对应的store文件所对应的位置
import store from './store/vuex'

Vue.config.productionTip = false

// 路由跳转
Vue.prototype.$goRoute = function (index) {
  this.$router.push(index)
}

Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

 

二、构建核心仓库 vuex.js

Vuex 应用的状态 state 都应当存放在 vuex.js 里面，Vue 组件可以从 vuex.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。

但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。

 

在 src 目录下创建一个 store 目录，将 store.js 放到 vuex 目录下

const CHECKNUM = "CHECKNUM"

const state = ()=>({
  checkNum:0
})

/**
 * 相当于计算属性
 */
const getters = {}

/**
 * 在action中提交到 对应的mutations中
 */
const mutations = {
  [CHECKNUM](state, {name,age}) {
    // 此处接收 对应提交过来的参数 如果没有则不接受
    console.info(name,age)
    state.checkNum++
  },
}
/**
 * 当dispatch的时候会自动找actions 中的方法
 */
const actions = {

  /**
   * 监听点击
   * @param {*} param0 vuex 上下文
   * @param {*} platformInfo  自定义传递进来的参数 {name:'',age:''}
   */
  async clickBtn({ commit, dispatch }, platformInfo){
    commit(CHECKNUM,platformInfo)
  }

}

export default {
  state,
  mutations,
  getters,
  actions
}

这是一个最简单的 store.js，里面只存放一个状态 checkNum

在创建一个vuex.js 主要为了扩展使用，在此处引入vue 和vuex 并引入刚刚已经新建的store

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'


Vue.use(Vuex)

/**
 * 创建 store 实例 为了扩展使用
 */
const storeVue = new Vuex.Store({
  modules: {
    store
  },
})

export default storeVue

 

 

三、将状态映射到组件

<template>
  <div>
    <ul>
      <!-- 循环出标记 -->
      <li v-for="(item,index) in links" :key="index"><a @click="$goRoute(item.route)">{{item.text}}</a></li>
    </ul>
    <Button @click="checkBtn">点击获取vuex中的值，您当前点击了{{checkNum}}</Button>
    <router-view></router-view>
  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'

  export default {
    name: 'app',
    data () {
      return {
        links: [
          {
            text: '首页',
            route: '/home'
          },
          {
            text: 'page1',
            route: '/page01'
          },
          {
            text: 'page2',
            route: '/page02'
          }
        ]
      }
    },
    computed: {
        ...mapState({
          checkNum: state => state.store.checkNum
        }),
    },
    methods: {
      ...mapActions(['clickBtn']),
      checkBtn(){
        this.clickBtn({name:'12313',age:12})
      }
    }
  }
</script>

<style>
  .text-center {
    text-align: center;
  }
  .spacing {
    margin-top: 30px;
  }
  .red {
    color: darkred;
  }
  ul li {
    display: inline-block;
    margin-right: 10px;
  }
  ul li a{
    display: inherit;
    padding: 5px 10px;
    border: 1px solid #ccc;
  }
  ul li a:hover{
    cursor: pointer;
    color: #fff;
    background-color: #138bec;
    border: 1px solid #138bec;
  }
</style>

这是 App.vue

主要在 computed中，将 checkNum

 ...mapState({
        checkNum: state => state.store.checkNum
      }),

 的值返回给自定义参数checkNum

页面渲染之后，就能获取到 checkNum 的值 

<Button @click="checkBtn">点击获取vuex中的值，您当前点击了{{checkNum}}</Button>

四、在组件中修改状态

然后在点击按钮时，将调用 store.js 中 引入进来的clickBtn

 methods: {
      ...mapActions(['clickBtn']),
      checkBtn(){
        this.clickBtn({name:'12313',age:12})
      }
    }

 

再点击按钮的时候触发checkBtn 事件 ，事件调用clickBtn 该 方法为 store.js 中的

使用commit 调用 mocation中