VUEX基础

        vuex:是专门为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

        先引入三个概念:state,mutations,actions

        state作用:共享状态的数据,

        mutations:修改state必须通过mutations,只能执行同步代码!!!

        actions:执行异步操作函数的位置,但是不能直接修改state的数据,还是需要先通过mutations再去修改state的数据

state数据,不可以直接操作state数据更改!!

        共享数据需要放在main.js中,或者从其他模块引入到main.js中,模块化开发会在后面提到,先以在main.js中直接写入数据为例.

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
     //定义state数据共享
  state:{
    count:0
    name:'bobo'
    }
}) 

new Vue({
    store,//原本写法 store:store
    render:h=>(App)
}).$mount('#app')

在组件中使用store里面state数据的时候,写在computed中

computed:{
    name(){
        return this.$store.state.name
    },
    count(){
        return this.$store.state.count
    }
}

  辅助函数mapState ,提高引用效率和上图执行效果相同

import { mapState } from "vuex"
export default{
  computed: {
    ...mapState(["name", "count"])
    }
}

mutation数据,可以用来更改state里面的数据

main.js 👇

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
     //定义state数据共享
  state:{
    count:0
    name:'bobo'
    },
  mutations: {
      setCount(state, data) {
        state.count += data
      }
    },
}) 

new Vue({
    store,//原本写法 store:store
    render:h=>(App)
}).$mount('#app')

调用mutation方法

在vue组件中👇 里面调用方式

{{ $store.commit("setCount") }}

在script里面声明

methods: {
    count(){
      return this.$store.commit('setCount',10)
    }
  },

辅助函数mapMutations

import { mapMutations } from "vuex";
 methods: {
   ...mapMutations(["setCount"])
  },

actions数据,负责进行异步操作

main.js中👇

  actions: {
      asyncAddCount(store, data) {
        setTimeout(() => {
          store.commit('setCount', data)
        }, 1000)
      }
    },

调用actions方法

 methods: {
    addAsyncCount(){
      this.$store.dispatch('asyncAddCount',123)
    }
  },

辅助函数mapActions

import { mapActions } from "vuex"; 
 methods: {
    ...mapActions(["asyncAddCount"]),
  },

补充:getters

除了state外,有时还需要从state中派生出一些状态,这些状态是依赖state的,此时就需要getters

在main.js中 👇

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.store({
     //定义state数据共享
  state:{
    count:0
    name:'bobo'
    list:[1,2,3,4,5,6,7,8,9,10]
    },

  getters:{
        filterList: state => state.list.filter(item => item >= 3),
    }
}) 

new Vue({
    store,//原本写法 store:store
    render:h=>(App)
}).$mount('#app')

调用getters中的函数

 computed: {
   this.$store.getters.filterList
  },

辅助函数mapGetters

import {  mapGetters } from "vuex";
...
  computed: {
    ...mapGetters(["filterList"]),
  },

补充:module 模块化

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象 state 当中。当应用变得非常复杂时，就有可能变得相当臃肿。Vuex会变得越来越难以维护, 由此，又有了Vuex的模块化

 模块化数据的简单使用

 const store = new Vuex.Store({
  modules: {
    //student模块
    student: {
        //使用命名空间锁
      namespaced: true,
      state: {
        name: 'bobo',
        age: 18,
        token: '111'
      },
      mutations: {
        getToken: (state) => {
          return state.token = '777'
        }
      }
    },

    //user模块
    user: {
      state: {
        token: '1111'
      }
    },

  getters: {
    token: (state) => state.student.token,
    age: (state) => state.student.age
  }
})

模块里面的数据获取

规范: $store.state.模块名.属性名

    {{ $store.state.student.name }}
    {{ $store.state.student.age }}
    {{ $store.state.student.token }}

 如果数据不清晰直接在浏览器的vue插件看

 

模块化中的命名空间

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。因此命名空间的出现就可以解决数据冲突的问题

namespaced: true

对上锁的命名空间进行数据的调用:在要调用的函数前面加上模块名的路径

常规取法:

this.$store.dispatch('student/getToken')

利用mapMutations取出已经上锁的函数

...mapMutations('模块名1',['函数名',.....])
...mapMutations('模块名2',['函数名',.....])

其他辅助函数

  import {createNamespaceHelpers} form 'vuex'
  const {mapMutations} = createNamespaceHelpers('student')
  ...mapMutations('user',['getToken'])