vueX（私有模块总结）_vuex models

概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理

状态，驱动应用的数据源；
视图，以声明方式将状态映射到视图；
操作，响应在视图上的用户输入导致的状态变化。

安装方法：

1. npm安装：

  npm install vuex@next --save
1

2. yarn安装：

   yarn add vuex@next --save
1

ps: 这时如果直接安装vuex，不指定版本的话，就会直接安装最新的vuex的版本。所以会出现报错。
报错就安装这个npm install --save vuex@3，或者安装其他需要的版本。

还有就是 uniapp中是自带vuex的，不用安装

核心模块

1.State（状态库）
state模块是用来定义和存放数据的，如果使用次数不多，可以使用$store.state.数据名去读取state中存放的数据；其中的store是Vuex模块的管理者，无论调用dispatch还是commit都需要store。当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。

2.getter
类似于vue实例中的计算属性，这个也是vuex特有的计算属性。

3.Mutation
类似于vue中的methods，是vueX中定义方法的地方，用于定义同步方法。
调用里边的方法时，可以用 this.$store.commit(“funName”,“参数”) 来调用。

4.actions
也是定义方法的，但是用来定义异步方法。
调用里边的方法时，可以用 this.$store.dispath(“funName”,“参数”) 来调用。

5.Module
用来进行模块管理，可以定义私有模块来进行定义某个页面的私有vueX

使用

在根目录或者pages文件下创建文件夹 store，然后在文件夹中定义index.js文件。文件内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
import home from './home.js'  // 引入子模块

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        home: home, // 子模块
    }
});
export default store
1
2
3
4
5
6
7
8
9
10
11
12

然后在main.js中引入，并挂载到vue实例上。

import Vue from 'vue'
import App from './App'

import store from './store/index.js'  // 这个路径记是本地的store路径，我的文件夹是创建在跟标签路径中，所以这样写
Vue.prototype.$store = store

const app = new Vue({
    store,
    ...App,
})
app.$mount()
1
2
3
4
5
6
7
8
9
10
11

然后是子模块home.js，我是放在了一开始创建的store文件夹下，内容如下：

// 只是一个普通对象就行，不用再创建vueX实例，因为是vuex中的子模块，所以会自动处理，如果用vuex去创建的话反而会冲突报错
const home = {
    state(){
        return{
            name: 'tom',
            age: 10,
        }
	}, //  尽量写成这个样子，这样可以变量私有化，防止变量污染。
    getters:{
    }, // 计算属性
    mutations: {
        setAge: (state,data) => {
            state.age += data
        }
	}, // 定义同步方法
    actions: {
        smt(context,payload){
            setTimeout(()=>{
            //用父模块的name赋值给子模块的uaerName
            context.commit('changeUserName',context.rootState.name);
            },2000);
        }
	},// 定义异步方法
}
export default home
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

然后是使用，

在组件中使用：
1.值的展示：

<template>
    <view id="test1">
            {{$store.state.home.name}} // 可以直接显示子模块中的值
        <view>
            {{age}}
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            age: this.$store.state.home.age  // 这样定义 会在一开始创建vue 实例的时候 获取到vueX中对应的值，但是不会根据vuex中值的改变而改变，只能自己定义方法进行修改
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
    },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

调用方法

<template>
    <view id="test2">
        {{ $store.state.home.age }}
        <view @click="click">点击</view>
    </view>
</template>
<script>

export default {
    computed: {
    },
    data() {
        return {
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        click() {
            this.$store.commit('setAge', 2);  // 直接commit调用就行  不用再this.$store.home.commit('setAge', 2);  这样 会报错 ，因为没有这个属性   dispsth同理
        }
    },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

如果需要多个子模块可以创建相应的文件，并在index.js中配置好。