vuex的使用，vuex实操（vuex的相关属性，vuex的五大核心属性）

⭐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 }
   sums123
}


//vue页面
//使用方式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;
    }
  },


//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
<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
    }
}


//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 
    }

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