vuex的基本使用

原文地址

一、简单实用vuex

1.通过命令npm install vuex --save下载vuex

2.在main.js文件中

//引入vuex组件
import Vuex from 'vuex'
//使用vuex组件
Vue.use(Vuex)
//创建vuex实例
const store = new Vuex.Store({
    //定义数据
    state:{
        count:0
    }
})
//在vue实例中使用
new Vue({
    store
    ...
})

3.在文件中使用数据，可以直接通过计算属性获取vuex值

computed:{
    count(){
        return this.$store.state.count
    }
}

4.可以直接通过赋值this.$store.state.count方法改变vuex值（不推荐，见后面）

二、将vue封装成一个组件

1.新建一个文件命名为store.js内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 1
    }
})

2.在main.js中引入文件，并使用

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

Vue.config.productionTip = false

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

三、vuex进阶：getters/mutations/actions

1.getters获取数据并做一些逻辑运算

我们可以在vuex中使用getters来做一些重复性的运算如下

new Vuex.Store({
    state: {
        count: 0
    },
    getters:{
        //获取双倍的count
        doubleCount(state){
            return state.count*2
        }
    }
})

在页面中，可以通过this.$store.getters.doubleCount获取到上面的双倍count

2.mutations数据状态管理

在vuex中，可以直接通过this.$store.state.count来修改数据，但是vuex是不希望我们直接这么做的，因为这样我们无法追踪到数据变化的状态，于是我们需要使用mutations来实现数据改变状态管理，如下：

new Vuex.Store({
    state: {
        count: 0
    },
    mutations:{
        //count加1
        addCount(state){
            state.count++;
        },
        //count减法操作带传值
        decCount(state,num){
            state.count-=num;
        }
    }
})

在页面通过调用this.$store.commit("addCount")来操作vuex里面的数据

通过调用传值this.$store.commit("decCount",5)实现每次减5的操作，注意，需要传多个值的话，只需要将第二个参数改为对象即可

这样，vuex中改变的数据可以在浏览器里的vue管理工具上查看改变的状态

注意：mutations内必须为同步的代码

3.actions异步管理数据

当遇到一些异步操作时，我们可以通过actions来管理

new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    //获取双倍的count
    doubleCount(state) {
      return state.count * 2
    }
  },
  mutations: {
    //count加1
    addCount(state) {
      state.count++;
    },
    //count减1
    decCount(state) {
      state.count--;
    }
  },
  actions: {
    actionsIncrease(context) {
      setTimeout(() => {
        //context为当前上下文
        context.commit("decCount", 5)
      }, 1000)
    }
  }
})

在页面通过调用this.$store.dispatch("actionsIncrase")来操作vuex里面的数据（若是需要传值，与mutations相同）