uniapp项目中store模式的使用

àì夳堔傛蜴生んèń 2023-02-09 11:48 29阅读 0赞

## 安装Vuex ##

hbuilderx中，右键项目，使用命令行窗口打开所在目录，（若未安装插件会提示安装），输入 ***npm install vuex --save***

## 创建Store ##

在项目下新建目录store，在目录下新建文件store.js（*注意，此处为js文件而非vue*），可将state、mutations等写在该文件内。也可将store.js拆分成多个文件，最后在index.js中引用，如下

![来自vuex文档][vuex]  
这里只简单举例单文件store.js的创建

//引用Vuex
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    //实例store对象
    const store = new Vuex.Store({ 
    	state: { 
    		count: 6
    	},
    	mutations: { 
    		/*......*/
    	}
    })
    
    //导出store对象
    export default store
    
    //export default const store或者export const store会报错

或者

//引用Vuex
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    //实例store并导出
    export default new Vuex.Store({ 
    	state: { 
    		count: 6
    	},
    	mutations: { 
    		/*......*/
    	}
    })
    
    //export default const store或者export const store会报错

## 使用Store ##

*  **只在某个（些）页面中使用**  
    在需要使用的页面中

//引入store
    import store from './store/store.js'
    
    //调用时
    store.state.count//6

*  **在全局中使用**  
    在main.js中先全局注册

/* import Vue from 'vue' import App from './App' */
    
    //引入store
    import store from './store/store.js'
    
    /* Vue.config.productionTip = false App.mpType = 'app' */
    
    const app = new Vue({ 
        ...App,
    	store //在全局vue实例挂载store
    })
    
    //app.$mount()

在其他页面使用时

this.$store.state.count //6

[vuex]: https://img-blog.csdnimg.cn/20200518170646982.png