1.首先安装vuex
npm install vuex --save //安装vuex
2.在mian.js中引入
import store from './store'
.use(store)
3.创建store文件件,并在文件件内创建index.js文件
import { createStore } from 'vuex'
export default createStore({
state: { //数据存放的位置
data:''
},
mutations: {//在mutations写方法更改state中的值
data(state,data){
state.data=data
}
},
actions: {//通过actions触发mutations的方法
dataone(context,data){
context.commit('data',data);//带引号的data是mutation里的,第二个data,是页面上
//传过来的参数
}
},
modules: {
}
})
4.页面中
import {useStore} from 'vuex'
export default{
setup(){
let a = 1
const store=useStore();
store.dispatch('dataone',a)
//括号内第一个参数为actions中的方法名,方法名不能与mutations中重复
//第二个为需要存储改变的值的变量
}
}