详谈--VUEX简介

vuex简介

安装

npm i vuex -S cnpm i vuex -S

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

vuex里有这么一个规则：

只能在mutaions里修改state，actions不能直接修改state

vuex 中还有state,getters,mutations,actions, modules,这五个核心部分

State 储存初始化数据，存储整个应用的状态数据----容器

Actions 处理Mutations中已经写好的方法 其直接触发方式是 this.$store.dispatch(actionName)

Getters 计算属性 对State 里面的数据二次处理（对数据进行过滤类似filter的作用）比如State返回的为一个对象，我们想取对象中一个键的值用这个方法

Mutations 可以把事件方法写在里面， 在页面中触发时使用this.$store.commit(‘mutationName’) 。可以触发Mutations方法改变state的值—定义的mutation必须是同步函数

modules可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理；–简单来说就是包管理工具

还有一个是 Plugins 插件就是一个钩子函数，在初始化store的时候引入

简单来说

state – 存放状态

getters – state的计算属性

mutations – 更改状态的逻辑，同步操作

actions – 提交mutation，异步操作

mudules – 将store模块化

完整的vuex 结构

const store = new Vuex.Store({ state: { // 存放状态 }, getters: { // state的计算属性 }, mutations: { // 更改state中状态的逻辑，同步操作 }, actions: { // 提交mutation，异步操作 }, // 如果将store分成一个个的模块的话，则需要用到modules。 //然后在每一个module中写state, getters, mutations, actions等。 modules: { } });

在组件中获取vuex状态

import store from 'store'; //组件中的状态就与store中的状态关联起来了。每当store.state.count发生变化时，都会重新求取计算属性，从而更新DOM。 const Counter = { template: `<div>{{ count }}</div>`, computed: { //计算属性 count () { // 获取store中的状态 return store.state.count; } } }

另一种获取状态方法

子组件中使用this.$store.state.count访问到state里面的count这个状态 const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { // 获取store中的状态 return this.$store.state.count; } } }

获取getters 的状态 （与上面基本一致）

// 注意------在组件中，则要写在计算属性中， computed: { doneTodos () { return this.$store.getters.doneTodos; } }