vue脚手架 vuex的搭建和使用

01 手动搭建vuex

        vuex叫做全局状态管理仓库

        vuex的搭建:

                1.下载vuex3.x版本  npm i  vuex@3.0.0 --save

                2. 在src/store下面创建index.js

                3.引入vue和vuex

                        import Vue from 'vue'

                        import Vuex from 'vuex'

                        Vue.use(Vuex)

                4.export default  new Vuex.Store({

                        五大属性 state mutations actions getters modules

                  })

                5.在main.js  import store from './store'

                6.注册到new.Vue里面去

02 vuex中的属性的使用

        vuex就是vue中的状态管理仓库  是整个vue项目都可以共享的一个仓库

        数据可以进行增删改查  任意页面都可以使用

        实现原理就是全局绑定仓库 并在vue里面注册 这样就是实现了共享数据  也实现了组件之间的数据传参

        vuex的缺点:

                1.比较笨重

                2.mutations 方法无法取得返回值

                3.mutations 方法里面不建议写异步代码 不然容易导致双向数据绑定失败

                4.vuex 的数据一旦页面刷新 数据会回归到默认值

                        解决: 结合数据补偿(sesionStorage)

        state的使用:

                定义各种变量     通过this.$store.state.变量名 来获取变量的值

                state里面的变量必须调用mutations里面的方法进行修改 

        mutations的使用:

                定义各种函数 用来修改state数据 每个函数有两个参数: state和传入要修改的数据的值

                调用mutations方法:

                this.$store.commit('mutataions方法', 修改的新值)

                只能传一个值,如果是多个数据可以传递一个对象

        getters的使用:

                vuex中的计算属性

                定义一个属性名 值接收一个回调函数 这个函数参数只有一个: state

                函数的返回值就是当前getters变量的新值

                获取:  this.$store.getters.变量名

                getters计算属性的变量无法更改 无法定义存值器和取值器

        actions的使用:

                这里面定义的方法支持异步方法 如果只是单纯的同步方法建议写到mutations里面

                actions里面写异步函数

                actions里面每一个变量都要定义成回调函数 参数接收一个 context 上下文对象(就是当前的vuex对象)

                actions里面定义的异步代码 不能直接修改state里面的变量  需要调用mutations方法修改state变量

                调用actions方法:  this.$store.dispatch('actions方法名',传入的参数)

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Vue脚手架搭建音乐播放器的流程: 1. 创建Vue项目:在终端进入你想要创建项目的目录,然后运行以下命令: ``` vue create music-player ``` 这将会创建一个名为 `music-player` 的新Vue项目。 2. 安装所需依赖:为了实现音乐播放器的功能,我们需要安装一些第三方依赖。在终端进入项目根目录,然后运行以下命令: ``` npm install axios vuex vue-router element-ui howler --save ``` 以上依赖分别是: - `axios`:用于发起HTTP请求。 - `vuex`:用于状态管理。 - `vue-router`:用于路由管理。 - `element-ui`:用于UI组件。 - `howler`:用于音频播放。 3. 创建Vue组件:在 `src` 目录下创建 `components` 目录,并在其创建所需的Vue组件。例如,可以创建一个名为 `Player.vue` 的组件,在其实现音乐播放器的功能。 ``` <template> <div class="player"> <!-- 音乐播放界面 --> </div> </template> <script> export default { name: 'Player', data () { return { // 状态数据 } }, methods: { // 方法 } } </script> <style scoped> /* 样式 */ </style> ``` 4. 配置路由:在 `src` 目录下创建 `router` 目录,并在其创建 `index.js` 文件,配置路由。 ``` import Vue from 'vue' import VueRouter from 'vue-router' import Player from '@/components/Player.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Player', component: Player } ] const router = new VueRouter({ routes }) export default router ``` 5. 配置Vuex:在 `src` 目录下创建 `store` 目录,并在其创建 `index.js` 文件,配置Vuex。 ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 状态数据 }, mutations: { // 状态修改方法 }, actions: { // 异步操作方法 }, modules: { // 子模块 } }) ``` 6. 编写业务逻辑:在 `Player.vue` 编写业务逻辑,例如发起HTTP请求获取音乐列表,实现音乐播放和暂停等功能。 7. 编译和运行项目:在终端进入项目根目录,然后运行以下命令: ``` npm run serve ``` 这将会编译并启动项目。在浏览器访问 `http://localhost:8080` 就可以看到音乐播放器了。 以上就是使用Vue脚手架搭建音乐播放器的流程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值