谈一谈对vuex的简单理解

背景

vue全家桶对我来说，已经多多少少用了快一年了，但是每次用到一些东西总是需要去查，总是不能很确定，加上洒家也不是一直连续用vue，导致我每次学会的的东西，过段时间在用的时候还需要重新查文档，这让我感觉十分困扰，所以我觉把整个学过的东西系统性的整理出来应该会有所帮助，希望自己以后能够坚持吧。

安装vuex

安装 Vuex

(前提是已经前提是已经用Vue脚手架工具构建好项目）

npm install vuex --save

• 新建一个文件夹vuex，在文件夹里面新建store.js，并在文件中引入vuex

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

复制代码

通过上面的步骤，vuex就算是安装注册成功了，下面就可以用vuex搞事情了

---

    import store from './vuex/store'
复制代码

• 最后我们需要实例化vue对象时加入store对象

    .
     new Vue({
      el: '#app',
      router,
      store,//使用store
      template: '<App/>',
      components: { App }
    })
复制代码

完成以上的工作，下面我们就可以做个属于自己的小demo了

---

第一个demo

• 在 store.js文件里

 const state = {
    count:1
 }
 
 const mutations = {
     add(state){
         state.count++;
     },
     reduce(state){
         state.count--;
     }
 };
 const getters = {
     isLogin:state =>{
         return state.count
     }
 };
 const sctions = {};
 
//基本格式为    
 export default new Vuex.Store({
        state，
        getters，
        mutations
  });

复制代码

用export default 封装好store对象，以便外部使用

由于我暂时感觉还用不到 actions，所以就等以后用到了再来补充吧

---

下面就是在组件内使用的方法了，

• 在components文件夹下新建一个count.vue

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{count}}</h3>
        <button @click="add">+</button>
        <button @click="reduce">-</button>
    </div>
</template>
<script>
    import store from '@/vuex/store'
    import {mapGetters} from 'vuex';
    export default{
        data(){
            return{
                msg:'Hello Vuex',

            }
        },
        computed:{
            count(){
                return this.$store.state.count;
            },
            isLogin(){
                return this.$store.getter.isLogin;
            }
            
        },
        methods:{
            add(){
                $store.commit('add')
            },
            reduce(){
                $store.commit('reduce')
            }
        }
        
    }
    </script>

复制代码

这应该算是最简单的一个 例子了，

--- 接下来我来详细阐述一下 mutations 和getters的使用`；

mutations

 const mutations={
        add(state){
            state.count+=1;
        },
        addNumber(state,n){
            state.count +=n;
        }
    }

复制代码

这里的mutations是固定的写法，意思是改变的,store里面的数仅能通过mutations里面的方法改变,但是必须是同步的，如果这里面出现 异步的逻辑会出现在unexpected fault,如果要是用异步的逻辑，可以写在actions里面，用它处理完后再出发mutations来改变状态

---

说了这么多，我们最关心的肯定是在组件里面怎么用，接下来就看一看，我们费了那么大的劲儿，就是为了最后食用我们之前辛勤耕耘的果实了。

store访问状态对象

const state ,这个就是我们说的访问状态对象，他就是我们spa（单页面应用程序）中的共享值。

• 通过computed的计算属性赋值

computed属性可以在输出前，对state.js的值进行改变，我们就里利用这种特性把store.js中的state赋值给我们模板中的data值 多说无益，看代码

computed:{
    yourdata(){
        return this.$store.state.count
    }
}
复制代码

要注意一定要写this要不然找不到$store的，这种写法虽然好理解，但是写起来麻烦，因此我们可以利用mapState的映射方法，来是我们的代码简洁，方便日后的维护。

• 通过mapState的对象赋值

首先引入mapState

import {mapState} from 'vuex'
复制代码

然后还在computed计算属性里写如下代码：

 computed:mapState({
    count:state=>state.count  //理解为传入state对象，修改state.count属性
     })
复制代码

• 或者

  computed:{
      ...mapState(['state1','state2','state3'])
  }

复制代码

再看下state的兄弟，getters

getters

getters 可以说是相当于 vue中的 computed，是依赖于 state里面的值

  getters:{
      isLogin:state =>{
          return  Boolean(state.stateValue);
      }
  }
复制代码

使用起来 和 state十分的像，如下：

    computed:{
        isLogin(){
            return this.$store.getters.isLogin;
        }
    }

复制代码

如果多的话可以引入 mapGetters模块，如下：

   import {mapGetters} from 'vuex';
   
   <!--在computed里-->
   
   computed:{
       ...mapGetters(["isLogin"])
   }
复制代码

其实我们还可以 用 mapMutations 来映射我们的mutation，如下

在store.js文件中写入

 export default new Vuex.Store({
        state:{
            count:1
        },
        mutations:{
            add(state){
                state.count++;
            }
            addNumber(state,n){
                state.count += n;
            }
        }
  });

复制代码

然后我们在组件中使用可以直接这样搞

在testComponent.vue文件中

    import {mapMutations} from 'vux';
    
   methods:{
       ...mapMutations([
       
       'add',//把 this.add() 映射为 this.$store.commit('add');
       
       'addNumber' // 将 this.addNumber(n)映射为 this.$store.commit('addNumber',n);
       ]),
       
       ...map({
           justAdd:'add' //将 this.justAdd()映射为 this.$store.commit('add');
       })
   }
    
复制代码

---

终于把自己的第一篇文档（在掘金里面）写完了，作为一个经验不足的小菜鸟，希望能够帮到那些刚入门的，还望各路神仙轻喷。

last but not least

vuex真的是特么太好用了，但是我的状态管理就是一把梭，我选择用{};

溜了~~~~