1. 创建一个uniapp项目
2. 在项目目录下用npm安装 vuex
npm install vuex --save
3. 在项目根目录下创建 store文件夹,在store文件夹中创建 index.js
4. 在index.js中显式地通过 Vue.use()
来安装 Vuex:
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)
5.在index.js中创建store
5.1 完整的store目录如下:
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑,同步操作
},
actions: {
// 提交mutation,异步操作
},
// 如果将store分成一个个的模块的话,则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
modules: {
a: moduleA,
b: moduleB,
// ...
}
});
5.2 导出store
export default store
6. 在main.js 中引入store
vuex的基础用法
index.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({
state: {
// 存放状态
count:0,
test:'这是store.js中的数据'
},
getters: {
// state的计算属性
//用 this.$store.getters.getData()读取
getData(state){
return state;
}
},
mutations: {
// 更改state中状态的逻辑,同步操作
//用 this.$store.commit('function_name',payload) 使用,若无参数则不写payload
add(state,n){
state.count += n;
}
},
actions: {
// 提交mutation,异步操作
}
})export default store