谈一谈vuex

Posted 2022-04-19 ymoonwind

首先安装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: ‘<App/>‘
)

至此，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

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

<template>
    <div class=‘testVuex‘>
        this.$store.state.number<br>
        this.$store.state.message
        </div>
</template>

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

 

 

但这并不是最好的方式，为此官方提供了一个更为可靠的方式，通过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值，看看有没有相应改变,代码如下：

<template>
    <div class=‘testVuex‘>
        this.$store.state.number<br>
        this.$store.state.message
        <button @click="change()">点击改变state的number</button>
        <button @click="change2()">点击改变state的message</button>
        </div>
</template>
<script>
export default 
    methods:
        change()
            this.$store.commit(‘changeNumber‘,6)
        ,
        change2()
            this.$store.commit(‘changeMessage‘)
        
    

</script>

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

 

 但这不是理想的改变值的方式；因为在 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

任一组件使用代码如下：

<template>
    <div class=‘testVuex‘>
        this.$store.state.number <button @click="change()">点击改变state的number</button><br>
        this.$store.state.message <button @click="change2()">点击改变state的message</button><br>
        <button @click="changeSyncNumber">点击改变</button>
       </div>
</template>
<script>
export default 
    methods:
        change()
            this.$store.commit(‘changeNumber‘,6)
        ,
        change2()
            this.$store.commit(‘changeMessage‘)
        ,
        changeSyncNumber()
            this.$store.dispatch(‘changeNumber‘,8)
        
    

</script>

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