Vuex的基本使用

一、安装

NPM

npm install vuex --save

Yarn

yarn add vuex

在main.js引入使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

创建store文件夹，里面创建一个js文件 store/index.js

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

Vue.use(Vuex)  // 必须显式地通过 Vue.use() 来安装 Vuex

export default new Vuex.Store({
  state: {
    addCount: 0, // 显示的数值
    subCount: 1
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

二、开始使用（显示）---state

在vue中state有三种用法(显示)
第一种

增加的数量1：{{$store.state.addCount}}

第二种

减少的数量：{{countTest}}

第三种

增加的数量2：{{addCount}}

三、Mutation

Mutation用于变更Store中的数据
① 只能通过mutation变更Store数据，不可以直接操作Store中的数据。
② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

  mutations: {
    /*
    add 函数接收两个参数
    state: store里面的state对象（和mutition平级的state）
    data: 外界传入的值，可以随意命名，a,b,c都可以
    */ 
    add(state,data) {
      // 每点击一次，在原来的基础上加 data数值
      state.addCount += data;
    }
  },

触发mutations的第一种方式

  methods: {
    handleAdd() {
      // commit 的作用， 就是调用某个 mutation 函数
      this.$store.commit('add',2)
    }
  },

触发mutations的第二种方式

export default new Vuex.Store({
  state: {
    addCount: 0, // 显示的数值
    subCount: 1,
    aTest: '我是测试1'
  },
  mutations: {
    /*
    add 函数接收两个参数
    state: store里面的state对象（和mutition平级的state）
    data: 外界传入的值，可以随意命名，a,b,c都可以
    */ 
    add(state,data) {
      // 每点击一次，在原来的基础上加 data数值
      state.addCount += data;
    },
    sub(state,step) {
      state.aTest = step;
    }
  },
})

四、Actions

Actions 用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。
触发actions的第一种方式：

export default new Vuex.Store({
  state: {
    addCount: 0, // 显示的数值
  },
  mutations: {
    add(state) {
      state.addCount += 1;
    },
  },
  actions: {
    asyncAdd(context) {
      setTimeout(()=>{
        context.commit('add')
      },1000)
    }
  },
})
-----------------
  methods: {
    handleAdd() {
      this.$store.dispatch('asyncAdd')   // store 里面的方法名是哪个就在dispatch里面写哪个方法名
    },
  },

触发actions异步任务时携带参数:

  actions: {
    asyncAdd(context,step) {
      setTimeout(()=>{
        context.commit('add',step)
      },1000)
    }
  }
-----
this.$store.dispatch('asyncAdd',2)

触发actions的第二种方式：

  actions: {
    asyncSub(context,step) {
      setTimeout(()=>{
        context.commit('sub',step)
      },1000)
    } 
  },

------
import {mapState, mapMutations, mapActions} from 'vuex'
  methods: {
    ...mapMutations(['sub']),
    ...mapActions(['asyncSub']),
    handleSub() {
      this.asyncSub(1);
    },
  },
------
// 或者直接在DOM元素中使用
减少的数量：{{$store.state.subCount}}
    
    减少

五、Getters

Getters用于对Store中的数据进行加工处理形成新的数据
① Getters 可以对Store 中已有的数据加工处理之后形成新的数据，类似于Vue的计算属性。
② Store 中数据发生变化，Getters 的数据也会跟着变化。
使用getters的第一种方式：

  getters: {
 // 这里的state 是store 里面state
    showNumber: state => {
      return '当前最新的数据是【'+ state.testCount +'】'
    }
  },
-----------
  // this.$store.getters.名称
 this.$store.getters.showNumber

使用getters的第二种方式：

import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
--------------
 computed: {
    ...mapGetters(['showNumber'])
  },
-----------
{{showNumber}}

六、modules(我这里后面更新的是vuex@4以上的)

1、先在store文件夹创建一个modules文件夹，里面新建你要见名知意的文件，我这里就使用home.js

modules.png

2.store文件夹里面的index.js文件

import {createStore} from 'vuex'
import home from './modules/home'
const store = createStore({
  state() {
    return {
      counter: 100
    }
  },
  mutations: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    }
  },
  actions: {},
  getters: {},
  modules: {
    home
  }
})

export default store

3.modules文件夹里面的home.js

export const homeModule = {
 /* 官方定义：默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对
  同一个 action 或 mutation 作出响应。
  Getter 同样也默认注册在全局命名空间，但是目前这并非出于功能上的目的（仅仅是维持现状来避免非兼容性变更）。
  必须注意，不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误。

  如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。
  当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调 整命名
  namespaced: true,  // 开启命名空间 */
  state(){
    return {
      homeCounter: 100
    }
  },

  mutations: {
    increment(state) {
      state.homeCounter++;
    }
  },
  actions: {
    incrementAction(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleHomeCounter(state) {
      return state.homeCounter*2;
    }
  }
}

export default homeModule

4、在页面用使用
基本的写法：（普通写法）

辅助函数的写法
第一种写法：(辅助函数写法)

第二种写法：(辅助函数写法)

第三种写法：(辅助函数写法)