Ⅰ.导入
npm i vuex --save
---------------------------
import Vuex from 'vuex'
Vue.use(Vuex);
注意：
| 版本 | vuex |
|---|---|
| vue2 | 要用vuex 3 版本 |
| vue3 | 要用vuex 4 版本 |
Ⅱ.vue 3 使用 vuex
创建store仓库： /store/index.js
import {
createStore } from 'vuex';
export default createStore({
state: {
name: 123 },
mutations:{
getname(state,newVal){
this.state.name=newVal;} },
//同步方法：(只有mutations才能改state的值)
actions:{
getnameAsync(){
... } }, //异步方法
geeter:{
}, //相当于计算属性
modules: {
} //将vuex分块
})
简单使用：
import {
useStore} from 'vuex'
export default {
setup(){
const store = useStore();
console.log(store.state.name); //获取
store.commit("getname", 12345); //修改
store.dispatch("getnameAsync", 12345); //修改
}
}
Ⅲ.vue 2 使用 vuex
创建store仓库： /store/index.js
export default new Vuex.Store({
state:{
count : 0}, //存储变量
mutations: {
add(state,step){
state.conut+=step; }}, //存储方法
actions: {
addAsync(){
...},//异步操作
geeter:{
}, //相当于计算属性
modules: {
}
})，
vue2使用vuex的方法有2种写法：
第一种 ： ( 通过this.$store获取 )
this.$store.state.变量名
this.$store.commit('add',1);
this.$store.dispatch('addAsync',1);
第二种 ： ( 直接解构出来 ，可以省去this.$store )
import {
mapState,mapMutations,mapActions} from 'vuex';
computed:{
...mapState(['conut']);} ---> count 可以直接使用{
{
conut}}
methods:{
...mapMutations(['add']), ---> button 可以直接使用 @onclick = add(1)
...mapActions(['addAsync']), ---> button 可以直接使用 @onclick = addAsync()
}
如果vue3觉得使用麻烦的话，可以试试更好用的 pinia 点击这里