Vuex使用笔记

发表于 2018-07-03 更新于 2020-04-02 阅读次数： Valine：

本文字数： 2.2k 阅读时长 ≈ 2 分钟

Vue-cli虽然好用，但是各个模块之间、各个页面之间的数据传递非常繁琐。所以才有了这个Vuex模块，用来管理Vue项目中的全局变量。~~既然都有全局变量了，谁还要局部变量呢？~~

这篇笔记本着够用就行，能用就行的宗旨，尽量以最少学习代价在实战项目中使用Vuex。

Ps：文中漏洞百出，还请各位批判阅读。

第一步安装

npm包层面

1	$ npm i vuex -S

良好的目录结构

为了有一个良好的目录结构，~~防止被同事打死~~方便维护，新建目录结构(加星号部分)

/
|- src
    |- store *
        |- index.js *
        |- modules *
            |- <modelsName>.js *

src/store 用来存放所有的全局变量相关文件
src/store/index.js 用来引入vuex模块并导入所有的全局变量模块
src/store/modules 用来存放所有的全局变量模块
src/store/modules/<modelsName>.js 一个全局变量模块

引入

修改 src/main.js 添加

1	import store from './store'; // 引入全局变量组件

`src/store/index.js`

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex);

import <modelsName> from './modules/<modelsName>' // 引入所有的模块

export default new vuex.Store({
    modules:{
        <modelsName> // 把所有的模块引入
    },
    state:{
        // 这里可以添加一点 真·全局变量 ，比上面的少一层，下面引用可知
    }
})

全局变量模块化的用处是防止变量重名，并且可以明确所属关系。

`src/store/modules/<modelsName>.js`

export default {
    state:{ // 这里用来定义所有的全局变量
        cookie:null,
        login:false,
        show:false,
        nick_name: null,
        avatar_url: null
    },
    mutations:{ // 这里的方法必须同步！
        switch_dialog(state){//这里的state对应着上面这个state
            state.show = state.show?false:true;
            //你还可以在这里执行其他的操作改变state
        },
        // 调用方式：$store.commit('<modelsName>/switch_dialog')
        increment (state, payload) {// 这是一个可以传参数(真名:载荷-payload)的方法
            state.nick_name = payload.nick_name // 传进来的参数可以是对象
        }
        // 调用方式: $store.commit('<modelsName>/increment', {nick_name: 'asdf'})
        // 或: $store.commit({type:'<modelsName>/increment', nick_name: 'asdf'})
    },
    actions:{ //这里放异步操作
        switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法
            context.commit('switch_dialog');
            //你还可以在这里触发其他的mutations方法
        },
        // 调用方式: $store.dispatch('<modelsName>/switch_dialog')
    },
    getters:{ // state的派生属性
        not_show(state){//这里的state对应着上面这个state
            return !state.show;
        }
        // 调用: $store.getters.not_show
        // 这就像一个值一样，不用加括号进行调用
    }
}

第二步使用

现在你已经基本完成了整个全局变量的框架建构，现在可以开始滥用使用了。

关于各种方法的使用请参照上面的文件，这边就简单写一下数据的使用吧。

this可以取到data的地方

1	that.$store.state.<modelsName>.nick_name

模板渲染的地方

1	{{$store.state.<modelsName>.nick_name}}

后记

基本上这样就可以足够应付大多数的情况了。另外Vuex还有很多的好用的功能(虽然我没用过)。

更多信息请看Vuex 是什么？

第一步 安装