个人Vuex的使用记录

const state={} 仓库存储数据的地方

const mutations ={}修改state里数据的唯一手段

const actions ={}处理action 可以书写自己的业务逻辑 也可以处理异步

const getters ={} 可以理解为计算属性 简化数据处理

在 main.js中注册完成后会产生一个$store 基本属性

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 定义一个name，以供全局使用
    name: '张三',
    // 定义一个number，以供全局使用
    number: 0,
    // 定义一个list，以供全局使用
    list: [
      { id: 1, name: '111' },
      { id: 2, name: '222' },
      { id: 3, name: '333' },
    ],
  },
});

获取store数据

使用this.$store.state.XXX可以直接访问到仓库中的状态数据

官方建议： 需要放在计算属性中

export default {
  mounted() {
    console.log(this.getName);
  },
  computed: {
    getName() {
      return this.$store.state.name;
    },
  },
};

挂载时候自动打印出仓库数据

官方提示：可以使用...mapState解构出数据 直接使用this.xxx

<script>
import { mapState } from 'vuex'; // 从vuex中导入mapState
export default {
  mounted() {
    console.log(this.name);
  },
  computed: {
    ...mapState(['name']), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
  },
};
</script>

获取数据后了解如何修改值：Mutation 同步方法不需要actions异步时候需要

在vue界面中不能直接使用this.$store.state.name=suibian 这样写是无法进行修改的需要通知仓库自己进行修改，vuex是当都独立在外部  我们只是在页面渲染它。

this.$store.commit('setNumberIsWhat', 666); 因为同步并且commit了 不需要使用actions

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: '张三',
    number: 0,
  },
  mutations: {
    setNumber(state) {
      state.number = 5;
    },
    setNumberIsWhat(state, number) {
//官方推荐使用   setNumberIsWhat(state, 随意对象名：suibian) {
        //state.number=suibian.number
      // 增加一个带参数的mutations方法
      state.number = number;
    },
  },
});

export default store;

<script>
export default {
  mounted() {//挂载时候打印
    console.log(`旧值：${this.$store.state.number}`);
    this.$store.commit('setNumberIsWhat', 666);
    //this.$store.commit('setNumberIsWhat',{number:666});
    console.log(`新值：${this.$store.state.number}`);
  },
};
</script>

官方建议使用对象传值 

...mapMutations解构方法在methods中

<script>
import { mapMutations } from 'vuex';
export default {
  mounted() {
    this.setNumberIsWhat({ number: 999 });
  },
  methods: {
    // 注意，mapMutations是解构到methods里面的，而不是计算属性了
    ...mapMutations(['setNumberIsWhat']),
  },
};
</script>

actions的使用  异步异步  或者同步直接走这个流程也是可以的

方法中需要写this.$store.dispatch('actions中的方法名进行提交mutions') 让mutions中的业务逻辑进行处理

 --------------------------------------------------------------------------------------

vuex进行模块式开发进行

仓库的拆分或者是小仓库的划分

如果项目过大 组件过多，数据量大 各种模块的数据存储分块

在store中创建home模块的小仓库

// home.js

const home = {
  state: {
    name: '我是home',
  },
  mutations: {},
  getters: {},
  actions: {},
};

export default home;

import Vue from 'vue';
import Vuex from 'vuex';
import home from './home'; // 引入store2模块

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: { home,search,update}, // 把home等模块挂载到store里面

});

export default store;

读取

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$store.state.home.name); // 访问home里面的name属性
  },
};
</script>