vuex入门使用

师傅领进门，修行在个人，从业这么长时间了，以前一直没咋用过Vuex，最近的一个项目中用到了，特来温习一下，本人理解不深，欢迎指正

vuex的使用

1.下载完成vue项目后，先下载vue依赖

cnpm i vuex

2.在main.js中引入vuex

import Vuex from 'vuex'
Vue.use(Vuex);

3.实例化vuex

const store = new Vuex.Store({
//state定义vuex中的变量(相当于vue中的data)
  state: {
    count: 0,
    count2: 0,
  },
//mutations修改vuex的值
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

4.将vuex定义到全局

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App),
  store//定义vuex到全局
})

页面中的获取

this.$store.state.count

页面修改vuex值

this.$store.commit('increment');

使用计算属性来展示状态，不太明白计算属性的可以自行在官网查看

<template>
  <div @click="fnClick">{{str2}}
  </div>
</template>
<script>
export default {
    name: "HelloWorld",
  data() {
    return {
        str:this.$store.state.count
    };
  },
  methods:{
    fnClick(){
        this.$store.commit('increment');
//      this.str=this.$store.state.count
    }
  },
  computed: {
    str2() {
      return this.$store.state.count
    }
  }
 }
</script>

以上呢就可以满足基本的vuex的使用了，如果有想稍微深入一点的请继续往下预览

Getter

上面我们知道了vue有一个计算属性，那么接下来我们介绍一下有关vuex中的计算属性
在state同级下添加getter,添加计算属性

getters: {
    doneTodos: state => {
      return state.count2=10;
    }
  }

在页面mounted中查看一下值的变化
this.$store.getters.doneTodos
我们发现值count2变成了10，一般在这里面写一点逻辑性比较强的操作

Action

上面我们看了计算属性，接下来给大家介绍一个异步的操作action，提交的是 mutation，而不是直接变更状态
在state同级下添加Action，添加Action方法后，vuex就可以使用异步的方法了，
main.js

    actions: {
    increment (context) {
      context.commit('increment')
    }
 },

调用方法

this.$store.dispatch('increment')

Module

在state同级下添加Module
Module方法简单来说就是如果业务庞大，要定义很多的变量的时候，我们为了查看方便，使用的一个方法，模块化（将臃肿的代码块细化）
代码结构没有修改，在外面定义，然后在添加到一个Object里面（小编比较懒，moduleA，moduleB是复制的，所以效果有点问题，测试的时候将moduleA或者moduleB注释一下即可看出效果）

const moduleA={
//  定义变量
  state: {
    count2: 0,
  },
//修改值
  mutations: {
    increment (state) {
      state.count2++
    }
  },
//异步操作,改变 mutations
    actions: {
    increment (context) {
      context.commit('increment')
    }
 }
}
const moduleB={
//  定义变量
  state: {
    count: 0,
  },
//修改值
  mutations: {
    increment (state) {
      state.count++
    }
  },
//异步操作,改变 mutations
    actions: {
    increment (context) {
      context.commit('increment')
    }
 }
}
const store = new Vuex.Store({
modules: {
    a: moduleA,
    b: moduleB
  }
})

页面中获取

this.$store.state.a.count2

这是本人对vuex简单的了解，后续还会出更加复杂一点的操作，有啥不对的地方欢迎指正，谢谢