vuex的基本使用

桔子爱笑2025-02-13 11:01

安装依赖包

cmd 复制代码

npm install vuex --save

导入依赖包，创建store对象 :store.js中

javascript 复制代码

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

Vue.use(vuex)

export default new vuex.store({
state:{
	count:0,//声明全局公用的变量数据
},
mutations:{
	//定义修改全局变量数据的方法
	add(state){
	state.count++
   },
	add2(state){
	state.count++
   }   
},
actions:{},
})

将store对象挂载到vue示例上：main.js中

javascript 复制代码

import vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new vue({
store,
render: h => h(App)

}).$mount('#app')

基本使用

app.vue

html 复制代码

<template>
<div>
<!--  使用组件-->
  <my-addition><my-addition>
<p>---------------------</p>
<my-subtraction><my-subtraction>
</div>
</template>


<script>
//引入组件
import Addition from "・/components/Addition・vue";
import Subtraction from "・/components/Subtraction.vue";

export default {
  data() {
    return {};
  },
  //注册组件
  components: {
    "my-addition": Addition,
    "my-subtraction": Subtraction
  }
}；
</script>

Addition.vue

html 复制代码

<template>
  <div>
<!--  组件中使用store中定义的全局公用的变量-->
   <h3>当前最新的count值为：{{$store.state.count}}</h3>
   <button @click="btnhandler1">+1</button>
   <button @click="btnhandler2">+n</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods:{
  btnhandler1(){
  //调用mutation里的修改全局变量数据的方法
  this.$store.commit('add')
  },
  btnhandler2(){
  //调用mutation里的修改全局变量数据的方法并传递参数
  this.$store.commit('add2'，'2')
  }
}
}；
</script>

Subtraction.vue

html 复制代码

<template>
  <div>
<!--  组件中使用store中定义的全局公用的变量-->
   <h3>当前最新的count值为：{{$store.state.count}}</h3>
   <button>-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
}；
</script>