vuex项目框架

Posted 2020-12-12 luoxuemei

1、脚手架搭建项目完成以后，安装vuex

cnpm install vuex --save

 

 

3、项目搭建

　　知识点：

• 　　state相当于数据源。
• 　　getter。从 store 中的 state 中派生出一些状态数据。即：从state中获取数值，然后进行操作(例如数据过滤），得到所需的格式数据，并不改变state。可以认为是 store 的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
• 　　Mutation。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。使用store.commit()提交。Mutation 必须是同步函数。
• 　　Action。Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。Action 通过 store.dispatch 方法触发store.dispatch()

　　由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

　　Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：　　　

1. 应用层级的状态应该集中到单个 store 对象中。

2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

3. 异步逻辑都应该封装到 action 里面。

 只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

　

2、搭建vuex项目功能模式和结构

　　

 

 　　（1）、在src下新建文件夹store

　　 （2）、在store文件夹下新建index.js文件和modules文件。其中modules文件夹下存在的是各模块下的数据

　　 （3）、在modules下新建用户模块相关的数据。

　　具体文件内容如下示：

　　（1）src/store/index.js文件代码如下实例：　　

 1 import Vue from ‘vue‘
 2 import Vuex from ‘vuex‘
 3 Vue.use(Vuex)
 4 import user from ‘./modules/user‘
 5 const store = new Vuex.Store({
 6     modules: {
 7        user
 8     }
 9 })
10 export default store

　　（2）src/store/modules/user.js文件代码如下实例：

　　　　getters的值，是通过对state进行数据处理返回，并不会修改state的值。

　　　　commit mutations是唯一可以直接修改state的途径。

　　　　actions里面的方法可以异步处理，然后把结果commit到mutations中

 1 const state = {
 2     USER_TYPE_LIST: [
 3         {value: 1, label: ‘管理员‘},
 4         {value: 2, label: ‘住户‘},
 5         {value: 3, label: ‘业主‘}
 6     ]
 7 }
 8 const getters = {
 9     USER_TYPE_LIST_USER_GETTER(state){
10         const filterAry = state.USER_TYPE_LIST.filter(item =>{
11             return item.value>2
12         })
13         return filterAry
14     }
15 }
16 const mutations = {
17     addUserType(state,obj){
18         state.USER_TYPE_LIST = obj
19     }
20 }
21 const actions = {
22     editUserType({dispatch,commit,state},obj){
23         // 此处可以调用后台接口，作异步数据处理。由于是demo原因，省略调用接口的功能
24         // dispatch(‘xxx)   // 可以调用actions里面的其他方法
25         // state可以获取state的值
26         commit(‘addUserType‘,obj)
27     }
28 }
29 export default {
30     namespaced: true,
31     getters,
32     state,
33     mutations,
34     actions
35 }

 

3、main.js页面引入

 1 import Vue from ‘vue‘
 2 import App from ‘./App.vue‘
 3 import store from ‘./store‘
 4 import router from ‘./router‘
 5 Vue.config.productionTip = false
 6 
 7 
 8 import ElementUI from ‘element-ui‘;
 9 import ‘element-ui/lib/theme-chalk/index.css‘;
10 Vue.use(ElementUI);
11 
12 new Vue({
13   render: h => h(App),
14   store,
15   router
16 }).$mount(‘#app‘)

 

4、页面使用举例：

　　值获取，可以引入使用辅助函数。或者可以直接调用this.$store方法。　　

 1 <template>
 2     <div>
 3         <h3>完整的list集合：</h3>
 4         <div v-for="(item,index) in USER_TYPE_LIST" :key="item.label+index">
 5             <label>{{item.label}}</label>
 6             <label>------</label>
 7             <label>{{item.value}}</label>
 8         </div>
 9         <h3>getters里面取符合条件的value>2的集合</h3>
10          <div v-for="(item,index) in userTypeListGetter" :key="index">
11             <label>{{item.label}}</label>
12             <label>------</label>
13             <label>{{item.value}}</label>
14         </div>
15         <el-button type="primary" @click="mutations" round>mutations调用</el-button>
16         <el-button type="primary" @click="actions" round>actions调用</el-button>
17     </div>
18 </template>
19 <script>
20     import { mapState, mapGetters } from ‘vuex‘
21     export default {
22         data() {
23            return {
24                user_list:‘user_list‘
25            }
26         },
27         computed:{
28             ...mapState({
29                  ‘USER_TYPE_LIST‘: state =>state.user.USER_TYPE_LIST
30             }),
31             ...mapGetters({
32                 ‘userTypeListGetter‘: ‘user/USER_TYPE_LIST_USER_GETTER‘
33             })
34         },
35         mounted(){
36             console.log(this.$store)
37             console.log(‘使用辅助函数生成计算属性，直接使用‘)
38             console.log(this.USER_TYPE_LIST)
39             console.log(this.userTypeListGetter)
40             console.log(‘没有使用辅助函数，直接this.$store获取属性值‘)
41             console.log(this.$store.state.user.USER_TYPE_LIST)
42             console.log(this.$store.getters[‘user/USER_TYPE_LIST_USER_GETTER‘])
43         },
44         methods:{
45             mutations(){
46                 const obj = {value: 4, label: ‘访客‘}
47                 const orgSetAry = new Set(this.USER_TYPE_LIST)
48                 orgSetAry.add(obj)
49                 this.$store.commit(‘user/addUserType‘, [...orgSetAry])
50             },
51             actions(){
52                 const obj = {value: 4, label: ‘访客‘}
53                 const orgSetAry = new Set(this.USER_TYPE_LIST)
54                 orgSetAry.add(obj)
55                 this.$store.dispatch(‘user/editUserType‘, [...orgSetAry])
56             }
57         }
58         
59     }
60 </script>
61 <style lang="less" scoped>
62     label {
63         width: 80px;
64         display: inline-block;
65     }
66     div{
67         margin: 10px;
68     }
69 </style>