一. 安装

vue2 版本对应vuex3
yarn add vuex@3

二.使用

src下新建store目录，目录结构如下

2.1 src下新建store目录，目录结构如下:

store结构.jpg

2.2 store->index.js 中：

import  Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import login from './modules/login'
const state={
    count:1,
    firstName:'张',
    lastName:'三'
}
const actions={
    add_count({commit},payload){
        commit('ADD_COUNT',payload)
    }
}
const mutations={
    ADD_COUNT(state,payload){
        state.count+=payload
    }
}
const getters={
    getFullName(state){
        return state.firstName+'-'+state.lastName
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    modules:{
        login
    }

})

2.3 main.js 中引入

import Vue from 'vue'
// 引入app组件，是所有组件的父组件
import App from './App.vue'
import store from './store';
// 创建vue实例对象
new Vue({
  el: "#app",
  // 下面这行代码完成了这个功能，将app组件放入容器中
  render: h => h(App),
  store
})

2.4 modules>login>index.js中：（store modules 使用）

const state={
    userName:"nick",
    pwd:'124'
}
const mutations={
    CHANGE_NAME(state,payload){
        state.userName=payload
    },
    CHANGE_PWD(state,payload){
        state.pwd=payload
    }
}
const actions={
    change_name({commit},payload){
        commit('CHANGE_NAME',payload)
    }
}
const getters={
    getAccountInfo(state){
        return `账号：${state.userName};密码：${state.pwd}`
    }
}
export default {
    state,
    mutations,
    actions,
    getters,
    namespaced: true
}

2.5 使用：

<template>
  <div>
    <!-- 大仓库中 -->
    当前count值：{{ count }}<br />
    getter 方式获取的姓名：{{ fullName }}<br />
    <!-- <button @click="add">count++</button> -->
    <button @click="add(1)">count++</button><br />
    <!-- login 仓库中 -->
    获取login仓库中firstName:{{ firstName }}<br />
    获取login仓库中的账号信息{{ accountInfo }}<br />
    <!-- <button @click="changeAccount">修改账户信息</button> -->
    <button @click="changeAccount('Linda')">修改账户信息</button>
    <!-- <button @click="changepwd">修改密码</button> -->
    <button @click="changepwd(456)">修改密码</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  name: "App",
  mounted() {
    console.log(this.$store);
  },
  methods: {
    // #region
    // 修改大仓库state中的数据
    ...mapActions({
      add: "add_count",
    }),
    // add(){
    //   this.$store.dispatch('add_count',1)
    // }
    // #endregion

    // #region
    //修改小仓库login仓库的数据
    // changeAccount() {
    //   this.$store.dispatch("login/change_name", "Linda");
    // },
    ...mapActions("login", {
      changeAccount: "change_name",
    }),
    // #endregion


    // #region
    /*
    修改密码 mutation
    */
    //  changepwd(){
    //    this.$store.commit('login/CHANGE_PWD',456)
    //  }
    ...mapMutations("login", {
      changepwd: "CHANGE_PWD",
    }),
    // #endregion
  },
  computed: {
    //#region
    //map 方式实现state 和getter 中值获取
    ...mapState(["count"]),
    ...mapGetters({
      fullName: "getFullName",
    }),
    // 一般方式获取
    // count(){
    //   return this.$store.state.count
    // },
    // fullName(){
    //   return this.$store.getters.getFullName
    // }
    //#endregion


    // #region
    //一般方式获取login仓库数据
    // firstName() {
    //   return this.$store.state.login.userName;
    // },
    // accountInfo() {
    //   return this.$store.getters.getAccountInfo;
    // },
    // 获取小仓库login.js 中数据 map方式
    //一定要设置 namespaced: true 在login 仓库中
    ...mapState("login", {
      firstName: (state) => state.userName,
    }),
    ...mapGetters("login", {
      accountInfo: "getAccountInfo",
    }),
    // #endregion
  },
};
</script>