vue3如何使用vuex

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中重复    
              //第二个为需要存储改变的值的变量
		}
	}

​

你可能感兴趣的:(vue,vue.js)