vue学习（二）Vuex基础篇（附带简单的事例）_vue 获取视频元素-优快云博客

本文链接：https://blog.youkuaiyun.com/jack_bob/article/details/88576018

实现上面动图的一个简单效果：（最下方附有代码）

1.mian.js导入store。store里面又导入getter.js和user.js 实例化store对象

2.videolist.vue页面mounted里面会加载触发this.getData(2)方法发起一条请求：获取到人员数组

3.getter.js讲的是可以从state里定义获取你要获取的变量的值

4.user.js里面讲的是初始化一个对象声明属性，以及actions和mutations方法（使用方法：当我们在videolist页面的方法里获取到返回的数据的时候使用vm.$store.dispatch('addAllMembers', allMembers)这个方法把allmembers提交到user.js的actions: 的addAllMembers方法里处理，再commit('SET_ALLMEMBER', allMembers)到mutations的SET_ALLMEMBER方法里）放入到State里了(回想一下文章的首图-流程图)

5.从vuex中取出allMembers数组，videolist.vue组件的computed的...mapGetters(['allMembers']) 拿到allMembers，通过el-table列表显示

6.点击其中一个member修改vuex store中user的phone的值

7.最外层的App.vue 页面组件获取展示：App.vue里通过computed：的...mapGetters(['userPhone'])从store里拿到phone展示

项目目录（就看这个5个文件）：

代码：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'Vue-axios'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// 一定要use一下,才能使用
Vue.use(VueAxios, axios)
/* eslint-disable no-new */

Vue.use(Element, {
  size: 'medium' // set element-ui default size
})

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

app.vue

<template>
  <div id="app">
      <nav class="navbar navbar-toggleable-md navbar-light bg-faded" style="background-color: #e3f2fd;">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <div class="navbar-text">
           （外部App.vue组件页面从store中拿出来的数据是）：
           <BUtton type="success">{{ userPhone }}</BUtton>
          </div>
      </div>
    </nav>
<router-view></router-view>
  </div>
</template>

<script>
import store from './store'
import { mapGetters } from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      username: this.$store.getters.userName
    }
  },
  methods: {},
  computed: {
    ...mapGetters(['userPhone'])
  }

}
</script>

<style lang='scss'>
@import "~bootstrap/scss/bootstrap";
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

components/Videolist.vue

/* eslint-disable handle-callback-err */
<template>
  <div class="video container mt-5">
  <div class="form-inline mb-3">
    <h6>（videolist组件开始的时候回发起一次请求，默认请求回2条会员信息）</h6>
    <!-- <button class="btn btn-primary" @click="getData(2)">手动请求2条</button> -->
    <!-- <button class="btn btn-primary" @click="getData(3)">手动请求3条</button> -->
  </div>
  <!-- {{allMembers}} -->
  <h3>第1种:ui-Element方式显示table表格</h3>
  <el-table  :data="allMembers"  style="width: 100%;height:100%;padding-top: 0px; v-overflow:hidden;" >
    <el-table-column label="序号" type="index" align="center" show-overflow-tooltip width="50px"></el-table-column>
    <el-table-column label="名称" min-width="25%" align="left">
      <template slot-scope="scope">
         {{scope.row.name}}
      </template>
    </el-table-column>
    <el-table-column label="邮箱" min-width="25%" align="left">
      <template slot-scope="scope">
         {{scope.row.email}}
      </template>
    </el-table-column>
    <el-table-column label="手机号" min-width="25%" align="left">
      <template slot-scope="scope">
         {{scope.row.phone}}
      </template>
    </el-table-column>
        <el-table-column label="操作" min-width="25%" align="left">
      <template slot-scope="scope">
         <el-button type="success" @click="clickMember(scope.row)">选择会员</el-button>
      </template>
    </el-table-column>
  </el-table>
<br>
  </div>
</template>

<script>
import store from '../store'
import { mapGetters } from 'vuex'
export default {
  name: 'VideoList',
  data() {
    return {
      msg: 'Welcome to 视频页面vue',
      listData: [],
      memberlist: this.$store.getters.allMembers // 从store获取的数据
    }
  },
  methods: {
    getData(size) {
      const vm = this
      vm.axios.get('https:/randomuser.me/api/?results=' + size).then(function(response) {
        console.log(response)
        vm.listData = response.data.results
        var allMembers = response.data.results
        vm.$store.dispatch('addAllMembers', allMembers)
      // eslint-disable-next-line handle-callback-err
      }).catch(function(error) {
        // console.log(response)
      })
    },
    updateUsername() {
      const vm = this
      vm.$emit('pushNewName', vm.username)// 1.触发事件名称2.向外部传的变量值
    },
    clickMember(row) { // 点击了会员member
      console.log(row)
      this.$store.dispatch('updateUserPhone', row.phone)
    }
  },
  mounted() { // 完成之后执行
    this.getData(2)
  },
  computed: {
    ...mapGetters(['allMembers'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import VideoList from '@/components/VideoList'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/page',
      name: 'VideoList',
      component: VideoList
    }
  ]
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

getter.js

const getters = {
  allMembers: state => state.user.allMembers,
  userPhone: state => state.user.phone,
  userName: state => state.user.name
}
export default getters

store/modules/user.js


export const user = {
  state: {
    name: '',
    phone: '',
    allMembers: []
  },
  actions: {
    // 修改用户名称
    updateUserName({ commit }, name) {
      console.log('user-actions方法updateUserName')
      commit('SET_NAME', name)
    },
    // 修改用户电话
    updateUserPhone({ commit }, phone) {
      console.log('user-actions方法updateUserPhone')
      commit('SET_USERPHONE', phone)
    },
    // 添加allmembers数组
    addAllMembers({ commit }, allMembers) {
      console.log('user-actions方法addAllMember')
      commit('SET_ALLMEMBER', allMembers)
    }
  },
  mutations: {
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_ALLMEMBER: (state, allMembers) => {
      console.log('user-mutations方法addAllMember')
      state.allMembers = allMembers
      console.log(state.allMembers)
    },
    SET_USERPHONE(state, phone) {
      console.log('user-mutations方法SET_USERPHONE')
      state.phone = phone
      console.log(state.phone)
    }
  }
}
export default user