基础部分

安装

npm i vuex --save
复制代码

简单介绍

• state
  • 存数据
• mutations
  • 修改数据–同步、简单逻辑
• actions
  • 复杂逻辑–异步、复杂逻辑

项目引用

创建 store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

let store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {}
})

export default store;
复制代码

在main.js引用

import store from './store.js';

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

组件里使用

• 基本方法

一个是直接在template里使用：
cmp.vue

{{ $store.state.xxx }}
复制代码

一个是在Vue实例使用：

this.store.state.xxx
复制代码

• 映射

mapState()
mapMutations()
mapActions()
复制代码

<script>
import { mapState, mapMutations, mapActions }

export default {
    computed: {
        ...mapState(['a'])
    },
    methods: {
        ...mapMutations([]),
        ...mapActions([])
    }
}
</script>
复制代码

除了参数可以是 [ ] 之外，也可以是 { }，作用是用来取别名

mapState({
    stateA: 'a'
})
复制代码

稍微进阶…

getters

如果是获取数据，可以直接用state，但为什么会有getters呢？
getters可以用来做些逻辑处理，例如判断用户登没登录，id为0就是没登录…
好处就是可以直接在getters写个方法，用来判断是否登录，不用每个人自己实现一个方法

store.js

getters: {
    a(state) {
        return state.a
    }
}
复制代码

使用：

• 直接使用

{{ $store.getters.a }}
复制代码

• 映射

<script>
import { mapGetters }

export default {
    computed: {
        ...mapGetters(['a'])
    }
}
</script>
复制代码

modules

用来把Vuex进行分块，例如一个放用户相关、一个放新闻相关…

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

let store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        a: {
            state: {
                a: 12
            },
            mutations: {
                setA(state, payload) {
                    state.a = payload
                }
            },
            actions: {}
            ...
        }
    }
})

export default store;
复制代码

以上写法，a模块因为名字叫a，而原本vuex里state也有一个a，这会覆盖原有Vuex里的东西，要吗该modules里模块的名字，要吗可以使用命名空间，避免这个问题，命名空间还可以把不同模块里，函数名一样的函数隔离开，避免因为修改一个模块里的变量，同时也修改了另一个模块里，相同变量名的变量：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

let store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
            user: { // 改名
            // 这里是新增的命名空间
            namespaced:true,
            state: {
                a: 12
            },
            mutations: {
                setA(state, payload) {
                    state.a = payload
                }
            },
            actions: {}
            ...
        }
    }
})

export default store;
复制代码

• 使用

{{$store.commit('user/setA', 123)}}
复制代码