vuex使用详解

一 vuex概念介绍

1 vuex介绍

vuex把组件的共享状态抽取出来，以一个全局单例模式管理
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性
的代码将会变得更结构化且易维护。

2 vuex有哪几种状态和属性

有五种，
分别是 State、 Getters、Mutations 、Actions、 Modules

3 vuex属性详解

state就是存放数据的地方，类似一个仓库
通过getters访问到state 类似于 Vue 中的计算属性一般写在computed
只有Mutations可以修改state里的数据 ，只能是同步操作
可以提交Actions，从而修改state数据，其中可以包含异步操作
Modules 就是对vuex状态进行模块化拆分

4 vuex的流程

状态state用来存储共享数据，在组件中可以通过触发事件异步的请求数据，
在actions中做第三方操作，数据拿到之后，可以通过commit提交具体的Mutations，可以去同步的修改State里的值
当状态发生变化之后，组件里面就可以实时的刷新vuex里边的状态

一 ：vuex 基本安装使用

1 安装

npm install vuex --save

2 页面注册使用

新建store.index文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
})

3 main.js注册

import store from "./store"
// 注册store
new Vue({
  el: '#app',
  router,
  store,
  components: { App  },
  template: '<App/>'
})

二：state的使用

1 在store.index文件，state定义全局变量数据

export default new Vuex.Store({
    state:{
        name:"大阿达"
    }
})

2 在其他页面使用

this.$store.state.变量名 => 获取值

<template>
  <div>
      // 可以直接获取state的值
      <p>{{this.$store.state.name}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods:{
  },
}
</script>

三：mutations的使用

1 在store.index文件，定义mutations进行修改

export default new Vuex.Store({
    state:{
        name:"兵兵",
    },
    mutations:{        
        changenameone(state){
            state.name = "张三"
        },
        changenametwo(state,val){
            state.name = val
        }
    },
})

2 在其他页面调用修改

template>
  <div>
      <p>{{this.$store.state.name}}</p>
      <button @click="changeNameNo">不传参数改变名称</button>
      <button @click="changeNameYes">传参数改变名称</button>
  </div>
</template>
<script>
export default {
  methods:{
      changeName(){
        this.$store.commit("changename",this.name)
      },
      changeNameNo(){
        this.$store.commit("changename")
      }
  },
  data () {
    return {
        name:"dada"
    }
  }
}
</script>

四：getters的使用

getters用法类似于vue文件中的计算属性（computed）

1在store.index文件，getters用于计算属性进行整体修改取值

需求1：针对state的值students，获取小于20岁学生
需求2：获取计算出来小于20岁学生数组中的长度（getters第二个参数的使用）
需求3：根据别人传进来的参数（岁）获取小于多少岁的学生(返回函数return的值)

export default new Vuex.Store({
    state:{
        name:"阿达的",
        students:[
            {name:"zhangsan",age:18},
            {name:"losi",age:28},
            {name:"wangw",age:38}
        ]
    },
    mutations:{
        changename(state,val){
            state.name = val
        }
    },
    getters:{
        gettername(state){
            return state.name + "00"
        },
        // 举例1 取小于20的学生
        xiao20Student(state){
            return state.students.filter(obj=> obj.age<20)
        },
        // 举例2 取小于20的学生数组长度
        xiao20StudentLength(state,getters){
            return getters.xiao20Student.length
        },
        // 举例3 取小于传入年龄的数据
        xiaoStrStudent(state,getters){
            return function (age)  {
                return  state.students.filter(obj => obj.age < age)
            }
        }
    }
})

2 在vue文件中使用

<template>
  <div>
     // 获取store数据
     <p>{{this.$store.getters.gettername}}</p>
     // 方法1 ===== (获取小于20岁的学生)
     // [ { "name": "zhangsan", "age": 18 } ]
     <p>{{this.$store.getters.xiao20Student}}</p>
     // 方法2 ===== (获取小于20岁的学生的长度)
     // 1
     <p>{{this.$store.getters.xiao20StudentLength}}</p>
    // 方法3 ======(获取小于30岁的学生)
    // [ { "name": "zhangsan", "age": 18 }, { "name": "losi", "age": 28 } ]
     <p>{{this.$store.getters.xiaoStrStudent(30)}}</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
}
</script>

五：getters的使用

1 actions用于异步提交mutations

export default new Vuex.Store({
    state:{
        name:"大大大",
    },
    mutations:{
        getname(state){
            state.name = "思思" 
        },
        changename(state,val){
            state.name = val
        }
    },
    getters:{},
    actions:{
        getnameactions(context){
            // 模拟异步功能
            setTimeout(()=>{
                context.commit("getname")
            },1000)
        },
        getnameactions(context,playload){
           setTimeout(()=>{
               context.commit("changename",playload)
           },1000)
        }
    }
})

2 在vue文件中使用

<template>
  <div>
     <p>{{this.$store.state.name}}</p>
     <button @click="changeName">button</button>
     <button @click="changeNameval(2222))">button</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {}
  },
  methods:{
      changeName(){
        this.$store.dispatch("getnameactions")
      },
      changeNameval(val){
        this.$store.dispatch("getnameactions",val)
      }
  },
}
</script>