谈一谈对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真的是特么太好用了，可是个人状态管理就是一把梭，我选择用{};

溜了~~~~