vue3使用vuex
第一步安装：
package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
}
}，
第二步：
在main.js中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
第三步 /store/index.js
import { createStore } from 'vuex'
// VueX数据管理框架
// VueX 创建了一个全局唯一的仓库,用来存放全局的仓库
export default createStore({
state: { name: 'zhangsan' },
// mutations 里面只允许写同步代码，不允许写异步代码
// commit 和 mutations做关联
mutations: {
changeName(state, str) {
state.name = str;
}
},
// dispatch 和 actions 做关联
actions: {
getData(store) {
store.commit('changeName', 'hello')
}
}
})
第四步页面获取和修改vuex数据
<template>
<div class="about">
<h1 @click="handleClick">This is an about page</h1>
<h1>{{name}}</h1>
</div>
</template>
<script>
import { toRefs } from 'vue';
// 引入useStore方法
import { useStore } from 'vuex';
export default {
name: 'Home',
setup() {
const store = useStore();
const { name } = toRefs(store.state);
const handleClick = () => { // 修改vuex里面的数据
store.dispatch('getData')
}
return { name, handleClick }
}
}
</script>