谈一谈vuex

首先安装vuex

npm install vuex --save

等显示安装成功后，在src文件夹里面新建store文件夹，并且在store文件夹里新建index.js。index.js代码如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    number:1,
    message:'我在测试state'
}
const store = new Vuex.Store({
    state
})
export default store

然后，我们到main.js文件引入store,代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

至此，vuex就可以正常使用了。

接下来就详细说说用法：

回到store文件夹里的index.js，先声明一个state变量，在这个变量里面，我就随便定义两个属性值，再把它扔到已经实例化的Vuex.store里面，代码如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    number:1,
    message:'我在测试state'
}
const store = new Vuex.Store({
    state
})
export default store

至此，我们就可以在任何组件里拿到这两个属性值了。不妨试试吧！代码如下：

代码运行，演示结果如下图：

 

 

但这并不是最好的方式，为此官方提供了一个更为可靠的方式，通过getters来实时监听state的数据变化。在这里解释下getters，据官方文档所述，getters相当于store的计算属性，它的返回值会根据依赖缓存起来。代码如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    number:1,
    message:'我在测试state'
}
const getters = {
    showNumer(state){
        return state.number
    },
    showMessage(state){
        return state.message
    }
}
const store = new Vuex.Store({
    state
})
export default store

这个时候需要引入一个新名词mutations来真正的改变一下state数据，代码如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    number:1,
    message:'我在测试state'
}
const getters = {
    showNumer(state){
        return state.number
    },
    showMessage(state){
        return state.message
    }
}
const mutations = {
    changeNumber(state,sum){
        state.number += sum
    },
    changeMessage(state){
        state.message = '我是改变后的message'
    }
}
const store = new Vuex.Store({
    state,
    getters,
    mutations
})
export default store

紧接着我们就去任一组件里通过this.$store.commit('changeNumber',6)以及this.$store.commit('changeMessage')改变下state值，看看有没有相应改变,代码如下：

代码运行，点击按钮，演示结果如下：

 

 但这不是理想的改变值的方式；因为在 Vuex 中，mutations里面的方法 都是同步事务，意思就是说：比如这里的一个this.$store.commit('changeNumber',sum)方法,两个组件里用执行得到的值，每次都是一样的，这样肯定不是理想的需求。

这个时候又要引入一个新名词actions来实现异步操作了。actions中回调函数的第一个参数是context,是一个与store实例具有相同属性和方法的对象。具体代码如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    number:1,
    message:'我在测试state'
}
const getters = {
    showNumer(state){
        return state.number*2
    },
    showMessage(state){
        return state.message
    }
}
const mutations = {
    changeNumber(state,sum){
        state.number += sum
    },
    changeMessage(state){
        state.message = '我是改变后的message'
    }
}
const actions = {
    changeNumber(context,sum){
        context.commit('changeNumber',sum)
    },
}
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})
export default store

任一组件使用代码如下：

点击改变后运行结果由1变成了9。

 

转载于:https://www.cnblogs.com/YMoonwind/p/11196128.html