vuex的基本用法

一.搭建vuex的环境

1.安装vuex

npm i vuex@3.6.2  // 用的vue2，不支持vuex最新4.x.x版本

2.在src文件夹下创建如下目录

• store：存放vuex相关文件的根目录
• modules：vuex模块化相关文件
• index.js：vuex的入口文件
• type.js：储存代替Mutation事件类型的常量
• user.js：自定义的vuex模块化文件

3.初始化index.js

在index.js中导入自定义模块user.js并导出

import Vue from 'vue'
import Vuex from 'vuex'
 
// 引入模块文件
import user from './modules/user'

Vue.use(Vuex)

// 导出模块 
export default new Vuex.Store({
  modules: {
   user
  }
})

4.初始化自定义模块user.js

/* 
	用户模块
 */

const state = {
 
}
 
const getters = {
 
}
 
const mutations = {
 
}
 
const actions = {
     
}
 
export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

命名空间：namesapced:true，当模块被注册后，它的所有getter、action及mutation都会自动根据模块注册的路径调整命名，比如我要访问这个文件中的state里边的某个属性：this.$store.state.user。后边这个user就是user.js模块名，我们要加上命名空间，相当于独立的区块去使用，模块和模块之间互不干扰。

5.在main.js中导入并注册store

import store from './store'

new Vue({
	store,
	render: h => h(App),
}).$mount('#app')

6.测试

在user.js中的state中添加数据

const state = {
	name: 'songdijie'
}

在页面中读取一下

<h1>{{$store.state.user.name}}</h1>

在页面中显示出name的值，这样一个简单的vuex结构就初始化完成了

二.知识点

1.vuex是什么？

同一状态（全局状态）管理，简单的理解，在SPA单页面组件的开发中，在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、修改，并且你的修改可以同步全局。

2.state, getters, mutation, actions

• state: 用于存储数据，相当于data
• getters：相当于computed计算属性
• mutation：用于修改state中的数据，相当于methods（不能进行异步操作）
• actions：相当于异步methods（可以进行异步操作）

3.state数据：

方法1

this.$store.state.user.name

方法2

<h1>{{name}}</h1>

import {mapState} from  'vuex'

computed: {
    ...mapState({
	name: state => state.user.name
    })
}

4.mutation方法

方法1

this.$store.commit('user/add', 'w')

方法2

import {mapState, mapMutations} from 'vuex'

methods: {
    ...mapMutations({
        add: 'user/add'
    })
}

this.add('w') // 调用

5.actions

方法1

this.$store.dispatch('user/delayAdd', {str: 'w', time:1000})

方法2

import {mapState, mapMutations, mapActions} from 'vuex'

methods: {
    ...mapActions({
        delayAdd: 'user/delayAdd'
    })
}

this.delayAdd({str: 'w', time:1000}) // 调用

6.getters

方法1

this.$store.getters['user/myName']

方法2

<h1>{{myName}}</h1>

import {mapState, mapMutations, mapActions, mapGetters} from  'vuex'
computed: {
    ...mapGetters({
        myName: 'user/myName'
    })
}

7.type.js代码

/* 
    定义类型常量，默认全部大写 
*/
const ADD = 'ADD'

export default {
    ADD
}

8.user.js代码

/* 
    用户模块
*/

// 导入 types.js 文件
import type from '../type.js'

const state = {
    name: 'songdijie'
}
 
const getters = {
    myName (state) {
	return state.name + 'SM'
    }
}
 
const mutations = {
    [type.ADD] (state, str) {
        state.name += str
    }
}
 
const actions = {
    delayAdd ({commit, state}, data) {
        // 异步操作
	setTimeout(function() {
	    commit(type.ADD, data.str)
	}, data.time)
    }
	
}
 
export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}