Vuex(一)

这篇文章简单讲解Vuex的使用，更详细的见Vuex（二）
Vuex(二)

1、安装Vuex

npm install vuex@3.0.1 -S

2、基本使用

多个组件要使用同一个数据


store.js:

import Vue from 'vue'
//配置vuex的步骤
// 1、运行npm命令安装
// 2、导入包
import Vuex from 'vuex'
//3、注册vuex到vue中
Vue.use(Vuex)
// 4、new Vuex.Store() 实例 得到一个数据仓储对象
var store = new Vuex.Store({
    state: {
        // 大家可以吧state想象成组件中的data，专门用来存储数据的
        // 如果在组件中想要访问store中的数据，只能通过this.$store.state.***来访问
        count: 0
    },
    mutations:{
        //注意:如果要操作store中的state值，只能通过调用mutations提供的方法才能操作对应的是数据，不推荐直接操作其中数据
        increment(state){
            //第一个参数是固定的，就是state
            state.count++
        }
        //如果组件想要调用mutations中的方法只能使用this.$store.commit('方法名')
    }
})
// 5、将vuex创建的store挂载到vm实例上，只要挂载到了 vm上，任何组件都能使用store来存取数据
export default store

main.js

HelloWorld.vue

在使用mutaions方法的时候提交参数

getters

 getters: {
        //注意：这里getters，只负责对外提供数据，不负责修改数据，如果想要修改state中的数据，要用mutations
        optCount:function(state){
            return '当前最新count值是：' + state.count
        }
        //和组件中过滤器类似，都是把原数据进行包装提供给调用者
        //和computed比较像，只要state中的数据发生了变化，那么如果getter正好也用了这个数据，那么就会立即触发getter的重新赋值
        
    }

3、总结