Vuex 是什么？

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

安装

默认使用 vue Cli 脚手架搭建

npm i vuex

在项目中使用Vuex

│  App.vue
│  main.js
│
├─assets
│      vue.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
       index.js

使用

// store/index.jjs
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
   // 存放状态
  state: {},
  // 成员操作
  mutations: {},
  // 异步操作
  actions: {},
  // 加工state成员给外界,可以理解成计算属性
  getters:{},
  // 模块化状态管理
  modules: {}
})

Vuex 工作流程

首先我们要知道 Vuex 中的数据全部是响应式的,组件可以通过提交Mutations中的方法来直接修改state中的数据,一旦state中的数据被修改Render重写渲染,组件页面被更新

若操作有异步操作则需要dispatch给Actons处理,之后在提交给Mutations

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false
// 全局事件总线
Vue.$bus = Vue.prototype.$bus = eventBus

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

state

state/index.js
export default {
    // 数据
    msg:"Hello World",
    language:["Java","JavaScript","Pythone","Go","TypeScript"],
    now:"2021-10-30"
}

actions

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

context 上下文(相当于箭头函数中的this)对象
payload 挂载参数

state/actions.js
// actions 中完成异步操作,之后在提交给 Mutations
export default {
// context 上下文
// payload 负载信息
   CHANGE_MSG(context,payload){
   // 可在 actions 中处理异步
        setTimeout(()=>{
            context.commit(CHANGE_MSG,payload)
        },2000)
    },
    EDIT_LANGUAGGE({commit},payload){
        // 进行条件判断在commit
        if(payload){
            commit(CHANGE_MSG,payload)
        }
    }
}

mutions

mutations方法都有默认的形参：mutations方法都有默认的形参:([state] [,payload] )

state是当前VueX对象中的state
payload是该方法在被调用时传递参数使用的

state/mutions.js
// mutions 才是真正修改state数据的地方
export default {
    // state 维护的数据
    // payload 负载信息
   CHANGE_MSG(state,payload){
       // 对 state 修改的一些逻辑
    },
    EDIT_LANGUAGGE(state,payload){
        // 对 state 修改的一些逻辑
    }
}

getters

可以对state中的成员加工后传递给外界 Getters 中的方法有两个默认参数

state 当前VueX对象中的状态对象
getters 当前getters对象，用于将getters下的其他getter拿来用

state/getters.js
// 可理解为计算属性 对数据进一步处理返回给使用者,并不影响源数据
export default {
// 利用getter 处理数据
    GET_INDEXOF_JAVA: state => {
        return state.language.filter(a=>a.indexOf("Java")!=-1)
}

modules

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块(module) 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

// state/Modules.js
export default {
      foo:{
      // 开启命名空间
          namespaced: true
      },
      bar:{}
}

带命名空间的绑定函数

mapState, mapGetters, mapActions 和 mapMutations

<template>
  <div>Hello World</div>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Test',
  computed: {
    //  名称空间开启之后 用法
    ...mapState('namespaced', ['foo.xxx']),
    // 命名空间未开启用法
    ...mapState('namespaced/foo.xxx')
    // ...其他三个 map 函数类似
    // 理解 {} 和 [] 区别和用法
    // more...
  },
  methods: {},
  data () {}
}
</script>

<style></style>

推荐文章: 官方文档 Vuex状态管理

Vuex(状态管理模式)一次搞懂