Vue第 26 篇，Vue中Vuex的使用详细，Vuex实操（vuex的相关属性，vuex的五大核心属性）

前言

Vuex是vue的状态管理工具（可理解为一个仓库），用于存储公共数据，任何组件都可以使用vuex里的公共数据。如果需要构建是一个中大型单页应用，会考虑如何更好地在组件外部管理状态，就使用Vuex。一般创建项目时都会勾选上Vuex，或者通过npm或yarn安装。这里来简单记录一下

---

一. 确定插件

首先，确保项目中有vuex插件。没有的话，就直接安装，下面是安装命令。请看

//npm
npm install vuex@next --save

//yarn
yarn add vuex@next --save

---

二. 五大核心

Vuex的五大核心属性和持久化插件，如下。请看

//store>index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//vuex的5个重要属性
export default new Vuex.Store({
  //1、state存放状态和数据
  state: {},
  //2、mutations修改状态和数据
  mutations: {},
  //3、getters计算属性
  getters: {},
  //4、actions异步操作
  actions: {},
  //5、modules模块化
  modules: {},

  //还有一个属性，用于vuex数据持久化； 需要npm安装，引入，使用
  // npm i vuex-persist --save
  // import vuexPersist from "vuex-persist";

  //和state和mutations同级
  plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],
})

---

三. 具体使用

Vuex属性，实际操作。请看

1. state，用来存放状态和数据

//store > index.js
state{
   data:{ name:"xxx",age:18 }
   sums：123，
}

页面调用

//使用方式1
<div>{{$store.state.data.name}}</div>
//使用方式2
<div>{{this.$store.state.sums}}</div>

2. mutations，用来修改状态和数据

//store > index.js
mutations: {
    add(state,num){//这里的num就是通过commit传值过来的数字10
      state.sums += state.sums + num;
    }
},

页面调用：

methods:{
  choseAdd(){
    //点击触发vuex里mutations中定义的方法，通过函数方法修改state数据，并传值
    this.$store.commit("add",10)
  }
}

3. gertters，计算属性

//store > index.js
state{
   count:10,
}
//getters 求count的平方
gerters:{
      choseCount(state){
        return state.count * state.count
      },
}

页面调用：

//使用方式1
<div>{{$store.getters.choseCount}}</div>
//使用方式2
computed: {
     power() {
      return this.$store.getters.choseCount;
    },
  }
<div>{{ power }}</div>

4. actions，异步函数操作

//store > index.js
//首先下载并引入axios
npm i axios
import axios from 'axios'
//然后再使用
actions: {
    async defineGetData (context, num) {//这里的num是传过来的数据123
        const res = await axios.get('https://******')
        // 触发通过调用mutation > commit 修改list的值
        context.commit('updateList', res.data.list)// context类似于this.$store
    }
},

mutations: {
    updateList (state, data) {//这里的data就是res.data.list
      state.list = data
    }
}

页面调用：

//激活调用
methods: {
    choseBtn() {
        // 使用dispatch调用actions方法，并传值
        this.$store.dispatch('defineGetData', 123)
    }
}

5. modules，模块化文件

//store > index.js
import demo1 from './module/demo1'
import demo2 from './module/demo2'

modules: { // 子vuex状态模块注册
        namespaced: true, // 为了解决不同模块命名冲突的问题
        demo1,
        demo2 
}

创作不易，感觉有用，就一键三连，感谢(●'◡'●)