vue3.0 vuex的使用

简单使用

首先使用vite项目后安装vuex

npm install vuex@next --save

或者

yarn add vuex@next --save

安装完后，来查看下
来到main.js，引入我们的vuex

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

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

在src下创建一个文件夹store，store下创建文件夹test，test下创建index.js文件

test中index中代码如下

export const test = {
    state: {//设置属性 用来存储数据
        index: 999 // 设置的值
    },
    getters: {//对应方法 用来获取属性的状态

    },
    mutations: {//更改属性的状态 

    },
    actions: {//应用 mutation 用于异步

    }
}

store文件下index.js配置如下

import { createStore } from 'vuex'
import {test} from './text/index'


export default createStore({ //vue3.0需要使用createStroe配置
    modules: {
        test          //分模块管理 test
    }
})

app.vue中配置如下

<script>
import { useStore } from "vuex"; //需要引入vuex
export default {
  setup() {
    let store = useStore();  // 定义
    console.log(store.state.test);  // 这里可以结果可以查看statez中属性
    console.log(stote.state.test.index) // 输出结果为999
   },
};
</script>

功能使用

mutations的使用：更改属性的状态或值
test中index中代码如下:

export const test = {
    state: {//设置属性 用来存储数据
        index: 999 // 设置的值
    },
    getters: {//对应方法 用来获取属性的状态

    },
    mutations: {//更改属性的状态 
        setChangeindex(state, val) {
            state.index = val     //state为vuex中的state,val为更改属性的值
        }
    },
    actions: {//应用 mutation 用于异步

    }
}

app.vue中的配置如下

import { computed } from 'vue'
import { useStore } from "vuex";
export default {
  setup() {
    let store = useStore();
    console.log(store.state.test.index); //999 
    store.commit('setChangeindex',50)
    console.log(store.state.test.index) //50
  },
};

如果渲染模板中需要使用到index则：

    return {
      index: computed(() => store.state.test.index),
    };

getters的使用
在test中index.js配置

export const test = {
    state: {//设置属性 用来存储数据
        index: 999 // 设置的值
    },
    getters: {//对应方法 用来获取属性的状态
        getindex:state => state.index+1,
    },
    mutations: {//更改属性的状态 
        setChangeindex(state, val) {
            state.index = val     //state为vuex中的state,val为更改属性的值
        }
    },
    actions: {//应用 mutation 用于异步

    }
}

app.vue的配置

import { computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    let store = useStore();
    console.log(store.state.test);
    store.commit("setChangeindex", 50);
    console.log(store.state.test.index);

    console.log(store.getters.getindex); // 51 可以获取index的状态
    return {
      shuju: computed(() => store.state.test.index),
    };
  },
};

action的使用
在test下index的配置

export const test = {
    state: {//设置属性 用来存储数据
        index: 999,// 设置的值
        resdata: '',
    },
    getters: {//对应方法 用来获取属性的状态
        getindex: state => state.index + 1,
    },
    mutations: {//更改属性的状态 
        setChangeindex(state, val) {
            state.index = val     //state为vuex中的state,val为更改属性的值
        },
        setRESdata(state, val) {
            state.index = val
        }
    },
    actions: {//应用 mutation 用于异步
        getres(context, vm) {
            return new Promise((resolve, reject) => {  //发起请求
                axios({
                    url: '接口地址',
                    method: 'get',
                    data: {},
                    dataType: 'json',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                })
                    .then(res => {
                        // console.log(res)
                        let data = res.resultData
                        context.commit('numRemindObj', data)
                        resolve()
                    })
                // })
            })
        },
        getindexs({ commit }, params) {   //设置值
            setTimeout(() => {
                commit("setRESdata", params)
            }, 1000)
        }
    }
}

在app.vue中的配置

import { computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    let store = useStore();
    console.log(store.state.test);
    store.commit("setChangeindex", 50);
    console.log(store.state.test.index);

    console.log(store.getters.getindex);

    console.log (store.dispatch('getres')) //action 状态

    console.log(store.dispatch('getindexs',{resdata:2000})) //action 状态

    return {
      shuju: computed(() => store.state.test.index),
      
    };
  },
};

模块化使用

3.0中模块化的使用比较简单 分配即可，用到其他模块import后在modules注册就行。

import { createStore } from 'vuex'
import {test} from './text/index'     //test模块


export default createStore({
    modules: {
        test            //test的模块
    }
})