vuex的用法

Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**，采用**`集中式`**存储管理应用的所有组件的状态，并以相应的规则保证状态以一种**`可预测`**的方式发生变化。

store目录下index.js vuex配置

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'
import tagsView from './modules/tagsView'

Vue.use(Vuex)

//  没有分模块时的配置
export default new Vuex.Store({
  state: {
    themeColor: localStorage.getItem('themeColor') || "#3baaa3",
    isShow: false
  },
  
  mutations: {
    //更新主题颜色
    setThemeColor(state, curColor) {
      state.themeColor = curColor;
      localStorage.setItem('themeColor', curColor)
    },
    showLoading(state) {
      state.isShow = true
    },
    hideLoading(state) {
      state.isShow = false
    }
  },
  actions: {},
  modules: {}
})


// 分模块下的导出配置
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    permission,
    tagsView
  },
  getters
})

export default store

state：放置所有公共状态的属性，类似data数据，但是是公共中的数据状态。

const store = new Vuex.Store({
  state: {
    // 管理数据
    count: 0
  }
})

在页面中获取引用state数据：

将state属性定义在计算属性中在页面引用

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

通过辅助函数- mapState形式调用数据

import { mapState } from 'vuex'
 computed: {
    ...mapState(['count'])
  }

---

 mutations：state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照

改变state数据通过mutations

在mutations定义改变state中数据的方法

addCount (state，payload) {
      state.count = payload
      state.count = state.count + payload
}

调用mutations

原始形式调用：

addCount () {
        // commit('muations名称', 2)
        this.$store.commit('addCount', 10)  // 直接调用mutations
}

使用辅助函数- mapMutations调用方法

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

---

 actions：actions则负责进行异步操作

 actions: {

    context参数表示当前的store的实例 可以通过 context.state 获取状态 也可以通过context.commit                     
    来提交mutations， 也可以 context.diapatch调用其他的action

    getAsyncCount (context) {
      setTimeout(function(){
        // 一秒钟之后 要给一个数 去修改state
        context.commit('addCount', 123)
      }, 1000)
    }
 } 

 调用actions

 addAsyncCount () {
     this.$store.dispatch('getAsyncCount', 123)
 }

辅助函数 -mapActions 调用方法

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getAsyncCount'])
}

---

getters：也算是一种另类的state数据，只不据时，在根级别的getters导出子模块的数据过是经过getters处理的计算属性，想使用子模块的数

  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

 调用getters

<div>{{ $store.getters.filterList }}</div>

辅助函数 -mapActions 调用方法

import { mapGetters }  from 'vuex'
computed: {
    ...mapGetters(['filterList'])
}

 对vuex数据进行模块化处理：

第一步，在store文件夹下，建立一个module文件夹

第二步，在module文件夹下，建立需要的模块名字的js文件，比如建立user.js,默认导出一个对象

user.js文件

import Cookies from 'js-cookie'

const state = {
}

const mutations = {
}

const actions = {
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

第三步，在store文件夹下，引入在module文件下的模块，注册在modules节点中

第四步，在index.js中建立子模块的快捷访问

访问modules：
获取子模块的状态

this.$store.state.模块名称.属性名

 getters: {
   token: state => state.user.token,
   name: state => state.setting.name
 } 
此时getters是根级别的getters

// 采用mapState 方式调用state状态
import { mapState } from 'vuex';
computed: {
   ...mapState(['visitorinfo', 'visitorinfo'])
},
console.log(this.visitorinfo)

 也可以在跟store的根目录下建议getters.js,创建子模块的数据快捷访问。

vuex数据比较多的时候就需要进行分模块处理，模块多数据也多的情况下数据不小心定义成一样的话就会造成数据污染的情况 ，所以最好不同的模块下有不同的命名空间

设置命名空间：namespaced: true,

如何访问带有命名空间的模块？

方案1：直接调用-带上模块的属性名路径
this.$store.dispatch('user/updateToken')

方案2：import { mapActions } from 'vuex'
      methods: {
        ...mapActions(['user/handleLogin'])
      },
      this['user/handleLogin']()
        
       

方案2：辅助函数-带上模块的属性名路径
methods: {
       ...mapMutations(['user/updateToken']),
       test () {
           this['user/updateToken']()
       }
   }