vuex在vue3.0中的使用

vuex在vue3.0中的使用

1. 安装vue3.0项目

这一步不多说了,不会的也不会看到这里,可以参考之前的博客

2. 安装vuex,注意是4.0

官网

安装 | Vuex (vuejs.org)

安装命令,在cmd命令行窗口中执行

npm install vuex@next --save

在package.json中出现

"vuex": "^4.0.2"

代表安装成功

3. 使用

vuex有四个参数

state     数据源(相当于data)

getters	计算属性

mutations   修改state的方法

actions    提交修改

4. 配置安装

4.1 在src中创建store文件夹,在文件夹中创建index.js

4.2 在index.js中写入以下内容

import {createStore} from 'vuex'

const store = createStore({
    state:{

    },
    getters:{

    },
    mutations:{

    },
    actions:{

    }
})

export default store;

4.3 在main.js中引入使用

import store from "./store";

createApp(App).use(store).mount('#app')

5. 使用

5.1 state

5.1.1 在index.js中的state中声明变量

state:{

​    name:'张三'

  },

5.1.2 在组件中使用

导入useStore

import {useStore} from 'vuex'

声明一个变量等于上面的vuex中的state

let name = ref('')

  name.value = useStore().state.name

<template>
  <div class="hello">
    {{name}}
  </div>
</template>

<script>
import {useStore} from 'vuex'
import {ref} from 'vue'
export default {
  setup(){
    let name = ref('')
    name.value = useStore().state.name
    return{
      name
    }
  }
}
</script>

5.2 getters

先在index.js中写

getters:{
        num(state){
            return state.name + '这是getters拼接的'
        }
    },

再在组件中使用

<template>
  <div class="hello">
    {{name}}
    <h1>{{num}}</h1>
  </div>
</template>

<script>
import {useStore} from 'vuex'
import {ref} from 'vue'
export default {
  setup(){
    let name = ref('')
    name.value = useStore().state.name
    let num = ref('')
    num.value = useStore().getters.num
    return{
      name,
      num
    }
  }
}
</script>

5.3 mutations

index.js

mutations:{
        add(state,n){
            // n是接收的参数
            state.price += n
        }
    },

组件

<template>
  <div class="hello">
    {{name}}
    <h1>{{num}}</h1>
    <h1>{{store.getters.num}}</h1>
    <button @click="add">点击＋5</button>
    <h1>{{store.state.price}}</h1>
  </div>
</template>

<script>
import {useStore} from 'vuex'
import {ref} from 'vue'
export default {
  setup(){
    let store = useStore()
    let name = ref('')
    name.value = useStore().state.name
    let num = ref('')
    num.value = useStore().getters.num
    let add = ()=>{
      store.commit('add',5)
      // 第一个是触发的事件,第二个是传递的参数
    }
    return{
      name,
      num,
      store,
      add
    }
  }
}
</script>

5.4 action

index.js

actions:{
        addPrice(context,n){
            // 第一个参数是上下文,第二个是接收的参数
            context.commit('add',n)
        }
    }

组件

<template>
  <div class="hello">
    {{name}}
    <h1>{{num}}</h1>
    <h1>{{store.getters.num}}</h1>
    <button @click="add">点击＋5</button>
    <button @click="addP">点击＋3</button>
    <h1>{{store.state.price}}</h1>
  </div>
</template>

<script>
import {useStore} from 'vuex'
import {ref} from 'vue'
export default {
  setup(){
    let store = useStore()
    let name = ref('')
    name.value = useStore().state.name
    let num = ref('')
    num.value = useStore().getters.num
    let add = ()=>{
      store.commit('add',5)
      // 第一个是触发的事件,第二个是传递的参数
    }
    let addP = ()=>{
      store.dispatch('addPrice',3)
    }
    return{
      name,
      num,
      store,
      add,
      addP
    }
  }
}
</script>

action的操作逻辑

先由事件触发dispatch,提交action中的事件,并传递参数

再由action中的context触发mutation中的事件更改state