前端
一点也不简单

Vue.js中的vuex 重难点

一.什么是状态?

用一条数据去管理一个视图或是视图中的一部分,那么我们就将这个数据称之为状态

二.什么是状态管理?

用一条数据去管理一个视图或是视图中的一部分,那么我们就将这个数据称之为状态,这种管理的形式我们称之为 状态管理

三.vuex是做什么的?(概念)

vuex是一个集中式的存储仓库【状态】,类似于 本地存储、数据库,vuex是vue的状态管理工具,它的功能主要是实现多组件间的状态【数据】共享

四.vuex的组成部分

  • state 状态
  • actions 动作(业务交互)
  • mutations 修改state
  • getters 获取数据的
  • stores state的存储者

五.应用场景

相对比较大型的应用(状态较多)

六.如何判断你的项目是不是应该使用vuex

1.当你觉得你的项目不需要vuex的时候,那么就不用

2.你觉得需要的时候,就直接使用

七.vuex的使用方案有哪些?(state修改前,state修改后)

1.前标准,后标准

2.前标准,后非标准 √

3.前非标准,后标准

4.前非标准,后非标准

八.使用(前后标准)

步骤

1.生产安装下载vuex

yarn add vuex

2.在src目录下建个store目录,然后在store目录下建立token木了和index.js,再在token目录下分别建立以下几个文件

store下的index要这么写:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import loginModule from './token'
const store = new Vuex.Store({
    modules: {
      token: loginModule
    }
})

export default store

token目录下:

3.index.js

集中管理这一类数据,其存在代表store

import state from './state.js'
import actions from './actions.js'
import mutations from './mutations.js'
import getters from './getters.js'

const loginModule = {
    state,
    actions,
    mutations,
    getters
}
export default loginModule

4.state.js

状态

const state = {
    token : localStorage.getItem('AuthorToken') ? localStorage.getItem('AuthorToken') : ''
}

export default state

5.type.js

常量,代表一个动作的标志

export const CHANGE_TOKEN = 'CHANGE_TOKEN'  //token的改变

6.actions.js

某动作的方法

import * as type from './type.js'

const actions = {
    changeToken ({commit},token) {//获取歌单id
        let action = {
            type : type.CHANGE_TOKEN,
            payload : token
        }
        commit( action )
    }
}

export default actions

7.mutayions.js

修改state

import * as type from './type'
const mutations = {
    [type.CHANGE_TOKEN] ( state,action ) { // 请求结束后,修改首页列表数据   null  -> payload
        state.token= action.payload
    }
}

export default mutations

8.getters.js

获取state数据

const getters = {
    getTokens ( state ) {
        return state.token
    }
    
}

export default getters

9.main.js里引入store即全局使用vuex

//引入vuex
import store from './store'
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

10.组件内调用vuex

import { mapActions,mapGetters } from 'vuex'
methods: {
    ...mapActions( ['changeToken'])
},
computed: {
    ...mapGetters( ['getTokens'] )
}

如此就可以使用vuex了!

我们使用这个案例来做token的demo,在这一篇文章中详解token的妙用

赞(0) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js中的vuex

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏