vue状态管理一文带你入门vuex

Vuex入门

---

前言

本篇文章主要总结了，vuex从开是安装到，使用方法的总结，适合入门小白，以及基础巩固的同学学习。

---

一、先理解vuex的概念，引出

官方：Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
小白表示听不懂
小白理解：就是把你需要在这个组件中用的变量，或者在另一个组件里也需要用的变量，统一放到一个地方，然后大家一起用。
然而我们最常用的父子组件进行通信的时候，通常会用采用的方法就是props + $emit这种方式，但是当这个需要传递的数据需要给多个组件用的时候，就会比较麻烦，并且也不好维护，这是， vuex统一状态管理，就发挥了表较好的作用。
举个栗子：

//父组件
<template>
  <div id="app">
    <Child :childs="childs"></Child>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Child from "./components/Child"
export default {
  name: 'Father',
  data(){
    return{
      childs:["child1","child2","child3"]
    }
  },
  components:{
    Child
  }
}
复制代码
//users子组件
<template>
  <div class="child">
    <ul>
      <li v-for="child in childs">{{child}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'child',
  props:{
    childs:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

子组件可以通过父组件来传递数据。但是子组件不可以修改父组件传过来的数据。
如果想要让子组件修改父组件的值也不是不可以，可以使用vue支持的语法糖来修改：可以看一下接下来的例子：

Vue.component('parent',{
   data() {
       return {
           isShow: false
       }
   },
   template:`
       <div>
           父组件的值：{{isShow}}<a href="javascript:;" @click="isShow=true">点击显示组件</a>
           <br/>
           <child :show.sync="isShow"></child>
       </div>
   `,

});
Vue.component('child',{
   props:{
       show:{
           type:Boolean,
           default:false
       }
   },
   methods: {
       close() {
           this.$emit("update:show", false)
       }
   },
   template:`
       <div style="background-color:#ddd" v-if="show">
           <div>子组件值{{show}}</div>
           <a href="javascript:;" @click="close">点击隐藏自己</a>    
       </div>
   `

})

效果展示：
当点击子组件隐藏的时候，子组件触发事件’update:show’并传参数false,父组件监听到@update:show执行回调函数update


之所以这么麻烦，是因为父组件可以通过props给子组件传递参数，但子组件内却不能直接修改父组件传过来的参数，所以需要使用提交$emit的方式触发方法，完成值的传递。
如果使用：vuex的话就可以比较方便的解决

二、vuex初探

1、安装和使用

npm install vuex --save
//首先创建一个store文件夹来保存全局状态：index.js
//在index.js基本配置：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({})
//在入口文件main.js应用全局状态store
import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

提问：为什么要创建store和index.js来保存状态，直接写在main.js 中也可以。但是为了方便管理和维护所以单独创建。

2、基本使用：

看例子之前需要了解一下，状态里面有什么：
state：基本数据
getters：从基本数据派生的数据
mutations：提交更改数据的方法，同步
actions：提交mutations，官方推荐异步执行放在这里
modules：模块化vuex
1、单一状态树：vuex使用单一状态树，就是用一个对象包含全部的状态数据。并且在state中定义的数据，返回的是全局响应式的数据。
2、从state中派生出的状态，getters接收state作为欸第一个参数，接收其它的getters作为第二个参数。例如：

getters: {
    // 单个参数
    countgetter: function(state){
        return state.count += 1
    },
    // 两个参数
    countadd: function(state, getters) {
        return getters.countgetter * 2
    }
}

3、更改状态唯一的方法就是mutations，提交mutation
mutation是同步的，如果要异步需要使用action触发store.commit方法来提交改变状态：store.commit('')
4、Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
注意：Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
分发actions
Action 通过 store.dispatch 方法触发：

store.dispatch('')

5、当我们的状态非常多，那么用单一状态树会变成一个很大的对象，所以就用到了modules

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
//这样我们把状态分为多个模块
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

接下来看一个小例子帮助理解：

//index.js文件中的状态
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    childs:["child1","child2","child3"]
  },
  getters:{
    radd(state){
       return state.childs
    }
  },
  mutations: {
    add(state){
      state.childs.push('child'+(state.childs.length+1))
    }
  },
  actions: {
    sadd(context){
      context.commit('add')
    }
  },
  modules: {
  }
})

//改变状态的组件
<template>
  <div>
    <ul>
      <button @click="$store.commit('add')">添加孩子</button><br/>
      <button @click="$store.dispatch('sadd')">异步添加孩子</button>
      <li v-for="(child, index) in $store.state.childs" :key="index">{{ child }}</li>
      <!-- 通过getters获取数组 -->
      <p>{{$store.getters.radd}}</p>

    </ul>
  </div>
</template>
<script>
export default {
};
</script>

效果展示：

---

总结

目前先总结这么多，还有辅助函数没有补充，后续还会改善和添加。菜鸟一枚，如有不足即时指正，接收批评。