vuex的使用 - 技术栈

vuex的使用

czy陈泽宇2024-06-12 21:06

1、安装：

javascript 复制代码

npm install vuex --save

2、引入

javascript 复制代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3、示例：不能直接改变store的状态，要通过mutation 中的commit进行提交

3、在store文件夹下创建一个store.js文件（与main.js同目录），在里面定义vuex

javascript 复制代码

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

Vue.use(Vuex)

export default new Vuex.Store({
  // state: 存放变量
  state: {
    count: 1
  },
  // mutation: 存放方法
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

4、在组件中使用的时候可以通过两种方式来注册

（1）第一种注册方法：在组件中把刚才定义好的vuex引入，一般引入名默认为store

javascript 复制代码

<template>
  <div class="hello">{{state.count}}</div>
</template>

<script>
import store from '../vuex-store.js'
export default {
  name: 'HelloWorld',
  // 变量通常在计算属性中返回
  computed: {
    state () {
      return store.state
    }
  }
  methods: {
    increase () {
      store.commit('increment')
    }
  }
}
</script>

（2）全局注入store机制：进行store全局注册后，可以不用在需要使用vuex的组件内进行注册，组件能够直接通过this.$store访问到。

访问state：可以通过this.$store.state访问状态。

访问mutation：可以通过this.$store.commit()提交mutaion来同步的改变状态。

分发action：使用this.$store.dispatch()分发action，这一步通常是异步操作。

获取getters：通过this.$store.getters获取vuex的getters，是对状态的计算属性。

注意：this.$store只能在组件的选项中使用，例如data、methods、computed等。如果在非组件的上下文中（例如在js或vue插件或前置路由守卫等）需要访问vuex，就直接导入并使用store实例即可。

javascript 复制代码

// 假设 store.js 是 Vuex store 的配置文件
import store from './store.js';

// 直接使用 store 实例    
store.commit('setMenuData', res.data)