vue3.0 vuex的使用

Posted 2021-12-23 oomsday

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 <pedding>状态

    console.log(store.dispatch('getindexs',resdata:2000)) //action <pedding>状态

    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的模块
    
)