本文共 3078 字，大约阅读时间需要 10 分钟。

本来是不打算学这个的，但是用到了，没办法只好学一下。当然只是学习一些基本的用法，想要在大项目中用好还是很难的

可以先看一下官方文档

接下来进入正题（最好先看完上面的）

vuex的五个属性

• state 状态，相当于vue中的data属性，就是用来放数据的
• getters 在state的基础上进行延申，相当于vue中的computed。这里说一下getters不会修改state中的数据
• mutations 和 actions 这两个是来修改state的，相当于vue中的methods
• modules 模块，所有的东西不可能放在一块，通过模块可以将数据进行分类

实例

moduleA.js

//statelet state = {       isShow: true,  //是否显示    name: 'Tom'}//getterslet getters = {       //这里说下我见过的三种形式，以name属性为例    //第一种形式    getName1(state) {           return state.name    },    //第二种形式    getName2(state) {           return () => state.name    },    //上面的是箭头函数的形式    // getName2(state) {       //     return function () {       //         return state.name    //     }    // }    //第三种    getName3(state, param) {           return param => {               return param + state.name        }    }}//mutations，以isShow属性为例let mutations = {       changeShow(state) {           state.isShow = !state.isShow    },    changeName(state, data) {           state.name = data    }}//ctionslet actions = {       //这里有两种写法，本质上一样    //写法1，无参    asChangeShow(context) {           context.commit('changeShow')    },    //写法2，无参    // asChangeShow({ commit }) {       //     commit('changeShow')    // }    //有参    asChangeName({    commit }, data) {           commit('changeName', data)    }}//导出模块export default {       namespaced: true,//是否开启模块    //键和值相同时可以简写    state,    getters,    mutations,    actions}

注：

index.js

import Vue from 'vue'import Vuex from 'vuex'import moduleA from './modules/moduleA'Vue.use(Vuex)export default new Vuex.Store({       store: {   },    getters: {   },    mutations: {   },    actions: {   },    modules: {           moduleA    }})

main.js

import Vue from 'vue'import App from './App.vue'import store from '@/store/index'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App),}).$mount('#app')

这里将store挂载到根实例中，这样做使得子实例直接通过this.$store调用，而不用单独导入。如果单独导入的话，使用store调用，与导入其它对象相同

App.vue

注：