vue3 中用vuex保存数据获取数据

先发吧数据发送到store.js里代码如下,通过store.commit发送("", ),store.state接收

setup(props, ctx) {
const data = reactive({
  name:'',
  qwe:store.state.list,   //获取vuex里的list数据
 
});

const add=()=>{
 store.commit("add",data.name)   //store.commit()发送数据
}
return { ...toRefs(data),add };
}

store.js里代码

import { createStore } from 'vuex'
import vuexPersist from "vuex-persist";
export default createStore({
  state: {
    list:[]
  },
  mutations: {
    add(state,val){
      state.list.push({name:val,id:0})
    }
  },
  actions: {
  },
  modules: {
  },
  plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],
})

记得下载vuex 和cnpm i vuex-persist -S!!!!!!!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3是一个流行的JavaScript框架,用于构建用户界面。VuexVue.js的官方状态管理库,用于在应用程序中集中管理和共享状态。下面是使用Vue 3和Vuex存储数据的步骤: 1. 安装Vuex:首先,你需要在项目中安装Vuex。可以使用npm或yarn来安装,命令如下: ``` npm install vuex ``` 2. 创建store:在项目的根目录下创建一个名为store.js的文件,并导入VueVuex: ```javascript import { createApp } from 'vue' import { createStore } from 'vuex' const store = createStore({ state() { return { // 在这里定义你的状态 } }, mutations: { // 在这里定义你的mutations }, actions: { // 在这里定义你的actions }, getters: { // 在这里定义你的getters } }) const app = createApp({}) app.use(store) export default store ``` 3. 定义状态:在store.js文件中的state对象中定义你的状态。例如: ```javascript state() { return { count: 0 } } ``` 4. 定义mutations:在mutations对象中定义用于修改状态的方法。例如: ```javascript mutations: { increment(state) { state.count++ }, decrement(state) { state.count-- } } ``` 5. 定义actions:在actions对象中定义用于处理异步操作的方法。例如: ```javascript actions: { asyncIncrement(context) { setTimeout(() => { context.commit('increment') }, 1000) } } ``` 6. 使用状态:在Vue组件中使用store中的状态。可以使用`$store.state`来访问状态,例如: ```javascript export default { computed: { count() { return this.$store.state.count } }, methods: { increment() { this.$store.commit('increment') }, decrement() { this.$store.commit('decrement') }, asyncIncrement() { this.$store.dispatch('asyncIncrement') } } } ``` 这样,你就可以在Vue组件中使用Vuex来存储和管理数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值