关于vue-x状态管理的一些知识

关于vue-x状态管理的一些知识：

对于vue-x之间用的不是很多，时间长了也忘的差不多，最近抽出了一些时间回忆了一下这部分知识点，因为想从0-1封装一个后台管理系统模版，或多或少的也会用到这部分知识，所以想重新拿起来。

vue-x官方语言说的最多的就是状态管理器，用我自己的语言来说的话，他是一个vue所有组件的一个公共data，这样说其实还是挺浅显的，实际用法区别还是蛮大的。vue-x可以用来存放数据，有它的计算属性，之前对计算属性和state本身的变化有点模糊，后来在做一些小的demo的时候，我感受到了这两者之间的区别。

如下述代码，这是vue-x中的代码

state: {
        routes:routeConfig,
        a:2,
        todos: [
            { id: 1, text: '...', done: true },
            { id: 2, text: '...', done: false }
        ]
    },
    getters:{
        todoB: state => {
            return state.a++
        },
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
          }
    },

打印一下todoB

this.$store.getters.todoB
//结果是2，没有发生变化

打印一下doneTodos，结果发生了变化

this.$store.getters.doneTodos

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-69oHTkDI-1630400901183)(/Users/nreal/Library/Application Support/typora-user-images/image-20210831164644970.png)]

这里我自己的理解是，上述那种相当于是直接去修改state中的变量值了，根据vue-x官网的规定：state值的变化只能通过一种方式mutations去改变state的值，所以是行不通的，第二种的他并没有改变state中的值，注意filter这个方法它会生成一个新的数组，返回的是由state衍生出来的新数组。

**mutations是用来更改state中的数值的，它是同步**的，用法是：

mutations：payload可以用来接收组件传过来的值，组件在传旨的时候一般以对象的格式比较好

mutations: {
  increment (state, payload) {
  	state.a += payload.amount
  }
},

给按钮绑定点击事件：

<el-button @click="add">加</el-button>

触发事件：

add () {
  this.$store.commit('increment',{
  	amount:10
  })
},

**actions**同样是可以用来改变state的值，但是它的改变方式是间接的，还是要通过mutations来改变。context是一个和store对象一摸一样的对象

actions: {
  increment (context,payload) {
  	context.commit('increment',payload)
  }
},

给按钮绑定点击事件：

<el-button @click="add">加</el-button>

组件中触发事件：

add () {
  this.$store.dispatch('increment',{
  	amount:10
  })
},

最后一个属性vue-x的模块化：

文件夹结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R3DU9NRq-1630400901185)(/Users/nreal/Library/Application Support/typora-user-images/image-20210831170358070.png)]

子文件：

const annother = {
    state: {
        array1:[1,2,3,4,5]
        
    },
    mutations: {
        delement (state) {
            state.array1.shift()
        }
    },
    actions: {
        
    },
    modules: {
    }
}

export default annother

母文件：

import Vue from 'vue'
import Vuex from 'vuex'
import route from './modules/route'
import other from './modules/other'
import another from './modules/another'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    route,
    other,
    another
  }
})

这样操作之后，除了访问state中的变量的值的时候，需要加上模块名称的前缀外，其他的用法几乎没什么区别，route是子模块的名称

console.log(this.$store.state.route.a)

写不下去了，qaq。