简单使用Vuex

第一步，安装

在命令行中输入安装指令

npm install vuex -s

配置 vuex，在src路径下创建store文件夹，然后创建index.js文件，文件内容如下：

import Vue from 'vue' //在vue3中不需要
import Vuex from 'vuex' 

Vue.use(Vuex) //在vue3中不需要

export default new Vuex.Store({
  state: {
    name: '女孩',
    number: 1,
  },
  getters: {
   
  },
  mutations: {
 
  },
  actions: {
   
  },
  modules: {}
})

修改main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' // 引入store对象
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第二步，在页面中使用state

<template>
    <div></div>
</template>

<script>
    export default {
        mounted() {
            // 使用this.$store.state.XXX可以直接访问到仓库中的状态
            console.log(this.$store.state.name); 
        }
    }
</script>

即可在控制台输出刚才我们定义在store中的name的值。

第三步，使用修饰器：getters

首先，在store对象中增加getters属性

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: '女孩',
    number: 1,
  },
  getters: {
    getMessage(state) { 
      return `我的${state.name}`;
    }
  },
})

在组件中使用：

 <template>
    <div></div>
</template>

<script>
    export default {
        mounted() {
           // 注意不是$store.state了，而是$store.getters
            console.log(this.$store.getters.getMessage)
        }
    }
</script>

查看控制台：

第四步，使用修改值：mutations

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: '女孩',
    number: 0,
  },
 mutations: {
    setNumber(state) { //让num从1变成10，state是必须默认参数
      state.number = 10;
    }
  },
})

在组件中使用：

 <template>
    <div></div>
</template>

<script>
    export default {
        mounted() {
           console.log(`旧值：${this.$store.state.number}`);
           this.$store.commit('setNumber');//注意是通过$store.commit获取
           console.log(`新值：${this.$store.state.number}`);
        }
    }
</script>

还可以将setNumber(state)传不固定参

     setNumber(state，payload) { 
         state.number = payload.number;
    }

在页面中使用

 this.$store.commit('setNumber', { number: 10 });

查看控制台：

这里说一条重要原则：Mutations里面的函数必须是同步操作，不能包含异步操作！

第五步，了解异步操作：actions

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: '女孩',
    number: 0,
  },
 mutations: {
    setNumber(state) { //让num从1变成10，state是必须默认参数
      state.number = 10;
    }
  },
actions: {
    setNum(content) {  // 增加setNum方法，默认第一个参数是content，其值是复制的一份store
      return new Promise(resolve => {  // 我们模拟一个异步操作，1秒后修改number为999
        setTimeout(() => {
          content.commit('setNumber', { number: 999 });
          resolve();
        }, 1000);
      });
    }
  },
})

在组件中使用：

 <template>
    <div></div>
</template>

<script>
    export default {
         async mounted(){
            console.log(`旧值：${this.$store.state.number}`);
            await this.$store.dispatch('setNum');//注意是通过$store.dispatch获取
            console.log(`新值：${this.$store.state.number}`);
      },
    }
</script>

查看控制台：