⭐vuex简介: 是vue的状态管理工具（也可理解为一个仓库），用于存储公共数据，任何组件都可以使用vuex里的公共数据；

⭐vuex使用场景：如果需要构建是一个中大型单页应用，会考虑如何更好地在组件外部管理状态，就使用vuex；一般创建项目时都会勾选上vuex，或者通过npm或yarn安装，如下：

//npm
npm install vuex@next --save//yarn
yarn add vuex@next --save

※ 下面给大家介绍一下vuex的相关属性和使用方式※

一、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，
}//vue页面
//使用方式1
{{$store.state.data.name}}
//使用方式2
{{this.$store.state.sums}}

2、mutations        修改状态和数据

//store > index.js
mutations: {add(state,num){//这里的num就是通过commit传值过来的数字10state.sums += state.sums + num;}},//vue页面使用
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},
}//vue页面
//使用方式1
{{$store.getters.choseCount}}
//使用方式2
computed: {power() {return this.$store.getters.choseCount;},}
{{ power }}

4、actions        异步函数操作

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

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