vue中使用vuex

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

vuex是使用vue中必不可少的一部分，基于父子、兄弟组件分别可以基于自定义属性和自定义事件传值，对于如果是没有关联的组件之间要使用同一组数据,那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。

Vuex的好处:

能够易于现阶段开发和后期维护

能够高效实现组件之间的数据共享,提高开发效率

存储在vuex中的数据都是响应式的.能够实时保持数据与页面的同步

一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,建议存储在自身的data中即可

vuex有以下特点:

vue官方搭配.类似vue-route,有专门的调试工具

集中式数据管理使操作更简洁

数据变化是响应式的,

独立于组件体系之外的,管理公共数据的工具

vuex的属性:

state:

存储公共数据,驱动应用的数据源。

mutations:

改变数据的方法集合,提交更新数据的方法,必须是同步的(如果需要异步使用action)。每 个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是实际进行状态更改的地方，接受 state 作为第一个参数，提交载荷作为第二个参数。

getters:

利用现有的状态进行计算得到新的数据,getter 的返回值会根据它的依赖被缓存起来,且只有当 它的依赖值发生了改变才会被重新计算。

actions:

Action 提交的是 mutation,而不是直接变更状态;

Action 可以包含任意异步操作。

modules:

模块化拆分,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。

Vuex的使用：

1.安装vuex依赖包

    npm install vuex --save

2.导入vuex包

import Vuex from "vuex"
Vue.use(Vuex)

3.创建store对象

const store = new Vuex.store({
    // state 中存放全局共享的数据
    state: { count: 0 }
})

4..将store对象挂载到vue实例中

new Vue({
    el: #app,
    render: h => h(app),
    router,
    // 将创建的共享数据对象挂载到vue实例中
    store,
})

State: 所有数据统一放到

// 创建store数据源，提供唯一公共数据
const store = new Vuex.store({
    state: { count: 0 }
})

其他组件访问state中的数据：

// 组件中访问全局共享数据
this.$store.state.count // 第一种方式

// 从vuex中按需导入mapState函数
import { mapState } from 'vuex' // 第二种方式
// 通过mapState函数将当前组件需要的全局数据映射为当前组件的computed计算属性
computed: {
    //count就是个计算属性
    ...mapState(['count'])  
}

Mutation: 用于变更store中的数据

只能通过mutation，不能直接操作store数据

这种方式可以集中监控所有数据变化，便于后期维护

不要在mutations中不要执行异步操作

const store = new Vuex.store({
    state: {
        count: 0
    },
    mutations: {
        add(state，step){
            // 变更状态
            state.count += step
        }
    }
})

// 触发mutation
methods: {
    handlel() {
        //触发 mutations得到第一种方式
        this.$store.commit('add',3)
    }
} 


// 从vuex中按需导入 mapMutations 函数
import {mapMutations} from 'vuex' //触发 mutations得到第二种方式
// 通过刚才导入的mapMutations函数，将需要的mutations函数映射为当前组件的么methods方法
methods: {
    ...mapMutations(['addn'])
}

Action: 用于异步变更store中的数据

const store = new Vuex.store({
    state: {
        count: 0
    },
    mutations: {
        add(state，step){
            // 变更状态
            state.count += step
        }
    },
    actions: {
        addAsync(context,step) {
            // 异步函数 定时器
            setTimeout(() => {
                context.commit('add',step)
            },1000)    
        } 
    }
})

// 触发action
methods: {
    handle() {
        //触发actions第一种方式
        this.$store.dispatch('addAsync',3)
    }
}


// // 从vuex中按需导入 mapActions 函数
import {mapActions} from 'vuew=x'    //触发actions第二种方式
// 通过刚才导入的mapActions函数，将需要的actions函数映射为当前组件的么methods方法
methods: {
    ...mapActions(['addAsync'])
}

Getter: 用于对store中的数据进行加工处理

加工处理后形成新的数据，雷系vue的计算属性

store数据发送拜年话，getter的数据也会跟着发生变化

const store = new Vuex.store({
    state: {
        count: 0
    },
    getters: {
        showNum: state => {
            return '当前最新的数据【‘+state.count +’】'
        }    
    }
}

this.$store.getters.showNum  //使用第一种方式


// 映射为当前组件的计算属性
improt {mapGetters} from ''vuex  //使用第二种方式
computed: {
    ...mapGetters(['showNum])
}

Modules: 模块化拆分

import home from './home'
import search from './search'
export default new Vuex.Store({
  // 实现模块是开发存储数据
  modules: {
    home,
    search,
  },
})