vue 项目难点_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的妙用